From da9127f2f44818774c9382b3fda1e1fc7c255c34 Mon Sep 17 00:00:00 2001 From: Baz Utsahajit Date: Tue, 19 Dec 2023 16:56:53 +0000 Subject: [PATCH 1/5] Hotfix: Restructure Source Examples and Tutorial --- docs/playground/index.md | 2 +- docs/tutorials/getting-started.md | 11 --- scripts/generate-example-docs.js | 2 +- scripts/generate-tutorial-docs.js | 2 +- src/components/Example/index.tsx | 10 +-- .../PixiPlayground/useEditorCode.ts | 17 +++-- .../useSandpackConfiguration.ts | 21 ++++-- src/components/Playground/index.tsx | 9 +-- src/components/Tutorial/index.tsx | 16 +++-- src/examples/index.ts | 40 +++++++++++ src/examples/v7.3.2/index.ts | 67 ++++++------------- src/examples/v8.0.0-rc/index.ts | 67 ++++++------------- src/tutorials/index.ts | 26 +++++++ src/tutorials/v7.3.2/index.ts | 20 +----- src/tutorials/v8.0.0-rc/index.ts | 20 +----- .../version-7.3.2/playground/index.md | 2 +- 16 files changed, 158 insertions(+), 174 deletions(-) delete mode 100644 docs/tutorials/getting-started.md create mode 100644 src/examples/index.ts create mode 100644 src/tutorials/index.ts diff --git a/docs/playground/index.md b/docs/playground/index.md index 149bc48b7..66ab04f5f 100644 --- a/docs/playground/index.md +++ b/docs/playground/index.md @@ -8,4 +8,4 @@ custom_edit_url: null import Playground from '@site/src/components/Playground/index'; import version from '../pixi-version.json'; - \ No newline at end of file + \ No newline at end of file diff --git a/docs/tutorials/getting-started.md b/docs/tutorials/getting-started.md deleted file mode 100644 index 8c14b2f21..000000000 --- a/docs/tutorials/getting-started.md +++ /dev/null @@ -1,11 +0,0 @@ ---- -hide_title: true -pagination_next: null -pagination_prev: null -custom_edit_url: null ---- - -import Tutorial from '@site/src/components/tutorial/index'; -import version from '../pixi-version.json'; - - diff --git a/scripts/generate-example-docs.js b/scripts/generate-example-docs.js index 8b48a64f2..8c864fa54 100755 --- a/scripts/generate-example-docs.js +++ b/scripts/generate-example-docs.js @@ -110,7 +110,7 @@ async function go() '', `# ${exampleTitle}`, '', - ``, + ``, '', ].join('\n'); diff --git a/scripts/generate-tutorial-docs.js b/scripts/generate-tutorial-docs.js index dc50a8fd6..f09b2cf3c 100755 --- a/scripts/generate-tutorial-docs.js +++ b/scripts/generate-tutorial-docs.js @@ -70,7 +70,7 @@ async function go() 'import Tutorial from \'@site/src/components/tutorial/index\';', 'import version from \'../pixi-version.json\';', '', - ``, + ``, '', ].join('\n'); diff --git a/src/components/Example/index.tsx b/src/components/Example/index.tsx index 6bb5ff9be..26216af38 100644 --- a/src/components/Example/index.tsx +++ b/src/components/Example/index.tsx @@ -3,11 +3,11 @@ import type { IVersion } from '@site/src/components/Playground/PixiPlayground/us import styles from './index.module.scss'; import BrowserOnly from '@docusaurus/BrowserOnly'; -import { getExampleEntry } from '@site/src/examples/v7.3.2'; +import { getExampleEntry } from '@site/src/examples'; -export default function Example({ id, version }: { id: string; version: IVersion }) +export default function Example({ id, pixiVersion }: { id: string; pixiVersion: IVersion }) { - const entry = getExampleEntry(id); + const entry = getExampleEntry(pixiVersion.version, id); const source = (entry?.source ?? entry) as string; return ( @@ -16,8 +16,8 @@ export default function Example({ id, version }: { id: string; version: IVersion {() => ( diff --git a/src/components/Playground/PixiPlayground/useEditorCode.ts b/src/components/Playground/PixiPlayground/useEditorCode.ts index d4d4cd056..af9b2dc57 100644 --- a/src/components/Playground/PixiPlayground/useEditorCode.ts +++ b/src/components/Playground/PixiPlayground/useEditorCode.ts @@ -1,25 +1,28 @@ import { useCallback, useMemo } from 'react'; -import type { ExampleSourceEntry } from '@site/src/examples/v7.3.2'; -import { getExampleOptions, getExampleEntry } from '@site/src/examples/v7.3.2'; import type { OptionGroup } from '@site/src/components/Select'; import type { SetURLStateType } from '@site/src/components/Playground/PixiPlayground/usePlaygroundURLState'; +import type { ExampleSourceEntry } from '@site/src/examples'; +import { getExampleEntry, getExampleOptions } from '@site/src/examples'; +import type { IVersion } from './usePixiVersions'; export const defaultExampleId = 'sprite.basic'; -const defaultExampleOptions = getExampleOptions(); type UseCodeExamplesParams = { urlSourceCode: string | undefined; selectedOptionId: string; setURLState: SetURLStateType; + pixiVersion: IVersion; }; -export const useCodeExamples = ({ urlSourceCode, selectedOptionId, setURLState }: UseCodeExamplesParams) => +export const useCodeExamples = ({ urlSourceCode, selectedOptionId, setURLState, pixiVersion }: UseCodeExamplesParams) => { + const version = pixiVersion.version; + const defaultExampleOptions = getExampleOptions(version); const hasUrlHashedCode = Boolean(urlSourceCode); const exampleEntry = useMemo( - () => getExampleEntry(selectedOptionId), - [selectedOptionId], + () => getExampleEntry(version, selectedOptionId), + [version, selectedOptionId], ); const { source: sourceCode, usesWebWorkerLibrary } = useMemo>( () => @@ -50,7 +53,7 @@ export const useCodeExamples = ({ urlSourceCode, selectedOptionId, setURLState } }, ], })), - [hasUrlHashedCode], + [defaultExampleOptions, hasUrlHashedCode], ); const handleOptionSelected = useCallback( diff --git a/src/components/Playground/PixiPlayground/useSandpackConfiguration.ts b/src/components/Playground/PixiPlayground/useSandpackConfiguration.ts index 7836cead5..4e8e7ecd7 100644 --- a/src/components/Playground/PixiPlayground/useSandpackConfiguration.ts +++ b/src/components/Playground/PixiPlayground/useSandpackConfiguration.ts @@ -65,6 +65,8 @@ type UseDependenciesParams = { pixiVersion: string; }; +const isPreV8 = (pixiVersion: string) => Number(pixiVersion.split('.')[0]) < 8; + const useDependencies = ({ isPixiWebWorkerVersion, isPixiDevVersion, pixiVersion }: UseDependenciesParams) => useMemo(() => { @@ -74,7 +76,7 @@ const useDependencies = ({ isPixiWebWorkerVersion, isPixiDevVersion, pixiVersion const packages = [pixiPackageName]; // Add these packages if we're using a version of pixi that doesn't have them built in, ie. < v8 - if (Number(pixiVersion.split('.')[0]) < 8) + if (isPreV8(pixiVersion)) { packages.push('@pixi/graphics-extras', '@pixi/math-extras'); } @@ -112,15 +114,22 @@ export const useSandpackConfiguration = ({ // could flip between examples easily, investigate why it bugs out during editing const key = `${dependenciesKey}-${code}`; - const customSetup = { + let customSetup: Record = { entry: 'index.html', dependencies, - devDependencies: { - '@babel/core': '^7.21.3', - 'parcel-bundler': '^1.6.1', - }, }; + if (isPreV8(pixiVersion)) + { + customSetup = { + ...customSetup, + devDependencies: { + '@babel/core': '^7.21.3', + 'parcel-bundler': '^1.6.1', + }, + }; + } + return { files, key, diff --git a/src/components/Playground/index.tsx b/src/components/Playground/index.tsx index 1c712fe70..d132271a6 100644 --- a/src/components/Playground/index.tsx +++ b/src/components/Playground/index.tsx @@ -7,11 +7,11 @@ import { usePlaygroundURLState } from '@site/src/components/Playground/PixiPlayg import styles from './index.module.scss'; import BrowserOnly from '@docusaurus/BrowserOnly'; -export default function Playground({ version }: { version: IVersion }) +export default function Playground({ pixiVersion }: { pixiVersion: IVersion }) { const [urlState, setURLState] = usePlaygroundURLState({ defaultExampleId, - defaultPixiVersion: version.version, + defaultPixiVersion: pixiVersion.version, }); const { source: urlSourceCode, exampleId: selectedOptionId } = urlState; @@ -20,6 +20,7 @@ export default function Playground({ version }: { version: IVersion }) urlSourceCode, selectedOptionId, setURLState, + pixiVersion, }); return ( @@ -38,8 +39,8 @@ export default function Playground({ version }: { version: IVersion }) ); } -export default function Tutorial({ id, version }: { id: string; version: IVersion }): JSX.Element +export default function Tutorial({ id, pixiVersion }: { id: string; pixiVersion: IVersion }): JSX.Element { + const version = pixiVersion.version; const [showEditor, setShowEditor] = useState(false); const handleEditorToggle = (): void => { setShowEditor(!showEditor); }; - const entry = getTutorialEntry(id); + const entry = getTutorialEntry(version, id); return (
@@ -87,7 +89,7 @@ export default function Tutorial({ id, version }: { id: string; version: IVersio {showEditor ? '< To Instructions' : 'To Editor >'} LOADING...}> - {() => } + {() => }
); diff --git a/src/examples/index.ts b/src/examples/index.ts new file mode 100644 index 000000000..ca4f2e393 --- /dev/null +++ b/src/examples/index.ts @@ -0,0 +1,40 @@ +import type { OptionGroup } from '../components/Select'; +import v7x from './v7.3.2/index'; +import v8x from './v8.0.0-rc/index'; + +export type ExampleDataEntry = { + name: string; + hide?: boolean; + usesWebWorkerLibrary?: boolean; +}; +export type ExampleSourceEntry = { + source: string; + hide: boolean; + usesWebWorkerLibrary: boolean; +}; + +// json data structure +export type ExamplesJsonType = Record; +// sourcecode dictionary structure for below +export type ExamplesSourceType = Record>; +// normalized combination of the above +export type CategoryDataType = Record; +export type ExamplesDataType = Record; + +// TODO: Use await import to dynamically load versioned content on demand instead? +const versions: Record = { + '7.3.2': v7x, + '8.0.0-rc': v8x, +}; + +export function getExampleEntry(version: string, pathString: string): ExampleSourceEntry | undefined +{ + const [directory, example] = pathString.split('.'); + + return versions[version]?.entries[directory]?.[example]; +} + +export function getExampleOptions(version: string): OptionGroup[] +{ + return versions[version]?.options; +} diff --git a/src/examples/v7.3.2/index.ts b/src/examples/v7.3.2/index.ts index 7588e51dc..e950e4884 100644 --- a/src/examples/v7.3.2/index.ts +++ b/src/examples/v7.3.2/index.ts @@ -83,30 +83,13 @@ import gradientResource from '!!raw-loader!./textures/gradientResource.js'; import renderTextureAdvanced from '!!raw-loader!./textures/renderTextureAdvanced.js'; import renderTextureBasic from '!!raw-loader!./textures/renderTextureBasic.js'; import textureRotate from '!!raw-loader!./textures/textureRotate.js'; -import type { Option, OptionGroup } from '@site/src/components/Select'; +import type { Option } from '@site/src/components/Select'; // Defines order of examples in documentation and playground dropdown, it's defined // separately here so it can be used in runtime code and in the md generation script import examplesData from './examplesData.json'; import { camelCaseToSentenceCase } from '@site/src/utils/utils'; - -export type ExampleDataEntry = { - name: string; - hide?: boolean; - usesWebWorkerLibrary?: boolean; -}; -export type ExampleSourceEntry = { - source: string; - hide: boolean; - usesWebWorkerLibrary: boolean; -}; -// json data structure -export type ExamplesJsonType = Record; -// sourcecode dictionary structure for below -export type ExamplesSourceType = Record>; -// normalized combination of the above -export type CategoryDataType = Record; -export type ExamplesDataType = Record; +import type { CategoryDataType, ExampleDataEntry, ExamplesDataType, ExamplesJsonType, ExamplesSourceType } from '..'; const examplesSource: ExamplesSourceType = { basic: { @@ -231,7 +214,7 @@ const normalizeExampleDataEntry = (categoryExample: ExampleDataEntry | string): }; }; -const normalizedExamplesData = Object.entries(examplesData as ExamplesJsonType).reduce( +const entries = Object.entries(examplesData as ExamplesJsonType).reduce( (directoryAcc, [categoryKey, categoryExamples]) => ({ ...directoryAcc, [categoryKey]: categoryExamples.reduce((categoryAcc, categoryExampleOrString) => @@ -252,35 +235,27 @@ const normalizedExamplesData = Object.entries(examplesData as ExamplesJsonType). {} as ExamplesDataType, ); -export function getExampleEntry(pathString: string): ExampleSourceEntry | undefined -{ - const [directory, example] = pathString.split('.'); - - return normalizedExamplesData[directory]?.[example]; -} - -export function getExampleOptions(): OptionGroup[] +const options = Object.entries(examplesData as ExamplesJsonType).map(([folderKey, folderEntries]) => { - return Object.entries(examplesData as ExamplesJsonType).map(([folderKey, folderEntries]) => + const options = folderEntries.reduce((acc, exampleDataEntry) => { - const options = folderEntries.reduce((acc, exampleDataEntry) => + const { name: exampleKey, hide } = normalizeExampleDataEntry(exampleDataEntry); + + if (hide) { - const { name: exampleKey, hide } = normalizeExampleDataEntry(exampleDataEntry); + return acc; + } - if (hide) - { - return acc; - } + return acc.concat({ + value: `${folderKey}.${exampleKey}`, + label: camelCaseToSentenceCase(exampleKey), + }); + }, [] as Option[]); - return acc.concat({ - value: `${folderKey}.${exampleKey}`, - label: camelCaseToSentenceCase(exampleKey), - }); - }, [] as Option[]); + return { + label: camelCaseToSentenceCase(folderKey), + options, + }; +}); - return { - label: camelCaseToSentenceCase(folderKey), - options, - }; - }); -} +export default { entries, options }; diff --git a/src/examples/v8.0.0-rc/index.ts b/src/examples/v8.0.0-rc/index.ts index 7588e51dc..e950e4884 100644 --- a/src/examples/v8.0.0-rc/index.ts +++ b/src/examples/v8.0.0-rc/index.ts @@ -83,30 +83,13 @@ import gradientResource from '!!raw-loader!./textures/gradientResource.js'; import renderTextureAdvanced from '!!raw-loader!./textures/renderTextureAdvanced.js'; import renderTextureBasic from '!!raw-loader!./textures/renderTextureBasic.js'; import textureRotate from '!!raw-loader!./textures/textureRotate.js'; -import type { Option, OptionGroup } from '@site/src/components/Select'; +import type { Option } from '@site/src/components/Select'; // Defines order of examples in documentation and playground dropdown, it's defined // separately here so it can be used in runtime code and in the md generation script import examplesData from './examplesData.json'; import { camelCaseToSentenceCase } from '@site/src/utils/utils'; - -export type ExampleDataEntry = { - name: string; - hide?: boolean; - usesWebWorkerLibrary?: boolean; -}; -export type ExampleSourceEntry = { - source: string; - hide: boolean; - usesWebWorkerLibrary: boolean; -}; -// json data structure -export type ExamplesJsonType = Record; -// sourcecode dictionary structure for below -export type ExamplesSourceType = Record>; -// normalized combination of the above -export type CategoryDataType = Record; -export type ExamplesDataType = Record; +import type { CategoryDataType, ExampleDataEntry, ExamplesDataType, ExamplesJsonType, ExamplesSourceType } from '..'; const examplesSource: ExamplesSourceType = { basic: { @@ -231,7 +214,7 @@ const normalizeExampleDataEntry = (categoryExample: ExampleDataEntry | string): }; }; -const normalizedExamplesData = Object.entries(examplesData as ExamplesJsonType).reduce( +const entries = Object.entries(examplesData as ExamplesJsonType).reduce( (directoryAcc, [categoryKey, categoryExamples]) => ({ ...directoryAcc, [categoryKey]: categoryExamples.reduce((categoryAcc, categoryExampleOrString) => @@ -252,35 +235,27 @@ const normalizedExamplesData = Object.entries(examplesData as ExamplesJsonType). {} as ExamplesDataType, ); -export function getExampleEntry(pathString: string): ExampleSourceEntry | undefined -{ - const [directory, example] = pathString.split('.'); - - return normalizedExamplesData[directory]?.[example]; -} - -export function getExampleOptions(): OptionGroup[] +const options = Object.entries(examplesData as ExamplesJsonType).map(([folderKey, folderEntries]) => { - return Object.entries(examplesData as ExamplesJsonType).map(([folderKey, folderEntries]) => + const options = folderEntries.reduce((acc, exampleDataEntry) => { - const options = folderEntries.reduce((acc, exampleDataEntry) => + const { name: exampleKey, hide } = normalizeExampleDataEntry(exampleDataEntry); + + if (hide) { - const { name: exampleKey, hide } = normalizeExampleDataEntry(exampleDataEntry); + return acc; + } - if (hide) - { - return acc; - } + return acc.concat({ + value: `${folderKey}.${exampleKey}`, + label: camelCaseToSentenceCase(exampleKey), + }); + }, [] as Option[]); - return acc.concat({ - value: `${folderKey}.${exampleKey}`, - label: camelCaseToSentenceCase(exampleKey), - }); - }, [] as Option[]); + return { + label: camelCaseToSentenceCase(folderKey), + options, + }; +}); - return { - label: camelCaseToSentenceCase(folderKey), - options, - }; - }); -} +export default { entries, options }; diff --git a/src/tutorials/index.ts b/src/tutorials/index.ts new file mode 100644 index 000000000..88dd5b4fe --- /dev/null +++ b/src/tutorials/index.ts @@ -0,0 +1,26 @@ +import v7x from './v7.3.2/index'; +import v8x from './v8.0.0-rc/index'; + +export type TutorialStep = { + header: string; + Content: string; + code: string; + completedCode?: string; +}; + +export type TutorialEntry = { + description: string; + thumbnail?: string; + steps: TutorialStep[]; +}; + +// TODO: Use await import to dynamically load versioned content on demand instead? +const versions: Record> = { + '7.3.2': v7x, + '8.0.0-rc': v8x, +}; + +export function getTutorialEntry(version: string, key: string) +{ + return versions[version]?.[key]; +} diff --git a/src/tutorials/v7.3.2/index.ts b/src/tutorials/v7.3.2/index.ts index 30959e667..78bf74949 100644 --- a/src/tutorials/v7.3.2/index.ts +++ b/src/tutorials/v7.3.2/index.ts @@ -1,26 +1,8 @@ import { gettingStartedTutorialSteps } from './gettingStarted'; -export type TutorialStep = { - header: string; - Content: string; - code: string; - completedCode?: string; -}; - -export type TutorialEntry = { - description: string; - thumbnail?: string; - steps: TutorialStep[]; -}; - -const tutorialsData: Record = { +export default { gettingStarted: { description: 'Learn the basics of how to use PixiJS.', steps: gettingStartedTutorialSteps, }, }; - -export function getTutorialEntry(key: string) -{ - return tutorialsData[key]; -} diff --git a/src/tutorials/v8.0.0-rc/index.ts b/src/tutorials/v8.0.0-rc/index.ts index 30959e667..78bf74949 100644 --- a/src/tutorials/v8.0.0-rc/index.ts +++ b/src/tutorials/v8.0.0-rc/index.ts @@ -1,26 +1,8 @@ import { gettingStartedTutorialSteps } from './gettingStarted'; -export type TutorialStep = { - header: string; - Content: string; - code: string; - completedCode?: string; -}; - -export type TutorialEntry = { - description: string; - thumbnail?: string; - steps: TutorialStep[]; -}; - -const tutorialsData: Record = { +export default { gettingStarted: { description: 'Learn the basics of how to use PixiJS.', steps: gettingStartedTutorialSteps, }, }; - -export function getTutorialEntry(key: string) -{ - return tutorialsData[key]; -} diff --git a/versioned_docs/version-7.3.2/playground/index.md b/versioned_docs/version-7.3.2/playground/index.md index 149bc48b7..66ab04f5f 100644 --- a/versioned_docs/version-7.3.2/playground/index.md +++ b/versioned_docs/version-7.3.2/playground/index.md @@ -8,4 +8,4 @@ custom_edit_url: null import Playground from '@site/src/components/Playground/index'; import version from '../pixi-version.json'; - \ No newline at end of file + \ No newline at end of file From af6c7e0cfff15c79f059eb41f440033cd176d04a Mon Sep 17 00:00:00 2001 From: Baz Utsahajit Date: Tue, 19 Dec 2023 20:55:33 +0000 Subject: [PATCH 2/5] Type hotfix --- src/tutorials/v7.3.2/gettingStarted/index.ts | 2 +- src/tutorials/v8.0.0-rc/gettingStarted/index.ts | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/src/tutorials/v7.3.2/gettingStarted/index.ts b/src/tutorials/v7.3.2/gettingStarted/index.ts index 79b2a054a..a0b7a6af6 100644 --- a/src/tutorials/v7.3.2/gettingStarted/index.ts +++ b/src/tutorials/v7.3.2/gettingStarted/index.ts @@ -4,7 +4,7 @@ import completedCode2 from '!!raw-loader!./step2-completed-code'; import code3 from '!!raw-loader!./step3-code'; import completedCode3 from '!!raw-loader!./step3-completed-code'; import code4 from '!!raw-loader!./step4-code'; -import type { TutorialStep } from '@site/src/tutorials/v7.3.2'; +import type { TutorialStep } from '../..'; import content1 from './step1-content.md'; import content2 from './step2-content.md'; import content3 from './step3-content.md'; diff --git a/src/tutorials/v8.0.0-rc/gettingStarted/index.ts b/src/tutorials/v8.0.0-rc/gettingStarted/index.ts index 79b2a054a..a0b7a6af6 100644 --- a/src/tutorials/v8.0.0-rc/gettingStarted/index.ts +++ b/src/tutorials/v8.0.0-rc/gettingStarted/index.ts @@ -4,7 +4,7 @@ import completedCode2 from '!!raw-loader!./step2-completed-code'; import code3 from '!!raw-loader!./step3-code'; import completedCode3 from '!!raw-loader!./step3-completed-code'; import code4 from '!!raw-loader!./step4-code'; -import type { TutorialStep } from '@site/src/tutorials/v7.3.2'; +import type { TutorialStep } from '../..'; import content1 from './step1-content.md'; import content2 from './step2-content.md'; import content3 from './step3-content.md'; From fd9b693660cd8015e0a50647b116109560e7b559 Mon Sep 17 00:00:00 2001 From: Baz Utsahajit Date: Thu, 21 Dec 2023 10:01:29 +0000 Subject: [PATCH 3/5] Added back parcel-bundler for all pixi versions --- .../PixiPlayground/useSandpackConfiguration.ts | 13 +++++-------- 1 file changed, 5 insertions(+), 8 deletions(-) diff --git a/src/components/Playground/PixiPlayground/useSandpackConfiguration.ts b/src/components/Playground/PixiPlayground/useSandpackConfiguration.ts index 4e8e7ecd7..8d2b85057 100644 --- a/src/components/Playground/PixiPlayground/useSandpackConfiguration.ts +++ b/src/components/Playground/PixiPlayground/useSandpackConfiguration.ts @@ -114,20 +114,17 @@ export const useSandpackConfiguration = ({ // could flip between examples easily, investigate why it bugs out during editing const key = `${dependenciesKey}-${code}`; - let customSetup: Record = { + const customSetup: Record = { entry: 'index.html', dependencies, + devDependencies: { + 'parcel-bundler': '^1.6.1', + }, }; if (isPreV8(pixiVersion)) { - customSetup = { - ...customSetup, - devDependencies: { - '@babel/core': '^7.21.3', - 'parcel-bundler': '^1.6.1', - }, - }; + customSetup.devDependencies['@babel/core'] = '^7.21.3'; } return { From 5aaf1100c4c4ad796760ff3a1c67c6e41fdacb63 Mon Sep 17 00:00:00 2001 From: Baz Utsahajit Date: Fri, 22 Dec 2023 12:59:29 +0000 Subject: [PATCH 4/5] Reverted conditioned babel core dev dependency --- .../Playground/PixiPlayground/useSandpackConfiguration.ts | 6 +----- 1 file changed, 1 insertion(+), 5 deletions(-) diff --git a/src/components/Playground/PixiPlayground/useSandpackConfiguration.ts b/src/components/Playground/PixiPlayground/useSandpackConfiguration.ts index 8d2b85057..c9b12863f 100644 --- a/src/components/Playground/PixiPlayground/useSandpackConfiguration.ts +++ b/src/components/Playground/PixiPlayground/useSandpackConfiguration.ts @@ -119,14 +119,10 @@ export const useSandpackConfiguration = ({ dependencies, devDependencies: { 'parcel-bundler': '^1.6.1', + '@babel/core': '^7.21.3', }, }; - if (isPreV8(pixiVersion)) - { - customSetup.devDependencies['@babel/core'] = '^7.21.3'; - } - return { files, key, From 6fc0350a2491f410972678a5405596fd40f7470b Mon Sep 17 00:00:00 2001 From: bbazukun123 Date: Mon, 15 Jan 2024 13:05:38 +0000 Subject: [PATCH 5/5] Chore: Upgrade Working Docs to use PixiJS v8.0.0-rc.2 and Simplify examples and tutorial source versioning (#60) * Chore: Upgrade Working Docs to use PixiJS v8.0.0-rc.1 * Simplify source versioning for examples and tutorials * Bump up to v8.0.0-rc.2 * Type fix * Add ghtoken ignore * Fix Versioned Links * Upgrade to RC4 * More Assorted fixes --------- Co-authored-by: Baz Utsahajit --- .gitignore | 4 +- docs/guides/basics/getting-started.md | 6 +- docs/guides/components/containers.md | 2 +- docs/guides/components/graphics.md | 4 +- docs/guides/components/interaction.md | 2 +- docs/guides/components/sprites.md | 2 +- docs/guides/components/text.md | 4 +- docs/guides/components/textures.md | 2 +- docs/pixi-version.json | 10 +- docusaurus.config.js | 4 + package-lock.json | 13 +- package.json | 1 + pixi-versions.json | 10 +- scripts/generate-example-docs.js | 23 +- scripts/generate-tutorial-docs.js | 21 +- scripts/update-global-version-configs.js | 13 + .../Homepage/ClosingSection/index.tsx | 2 +- src/components/Homepage/HeroHeader/index.tsx | 2 +- src/examples/index.ts | 30 +- .../advanced/collisionDetection.js | 0 .../{v7.3.2 => v7.0.0}/advanced/mouseTrail.js | 0 .../advanced/scratchCard.js | 0 .../{v7.3.2 => v7.0.0}/advanced/screenShot.js | 0 .../{v7.3.2 => v7.0.0}/advanced/slots.js | 0 .../{v7.3.2 => v7.0.0}/advanced/spinners.js | 0 .../{v7.3.2 => v7.0.0}/advanced/starWarp.js | 0 .../{v7.3.2 => v7.0.0}/assets/async.js | 0 .../{v7.3.2 => v7.0.0}/assets/background.js | 0 .../{v7.3.2 => v7.0.0}/assets/bundle.js | 0 .../{v7.3.2 => v7.0.0}/assets/multiple.js | 0 .../{v7.3.2 => v7.0.0}/assets/promise.js | 0 .../{v7.3.2 => v7.0.0}/basic/blendModes.js | 0 .../{v7.3.2 => v7.0.0}/basic/cacheAsBitmap.js | 0 .../{v7.3.2 => v7.0.0}/basic/container.js | 0 .../basic/particleContainer.js | 0 .../{v7.3.2 => v7.0.0}/basic/simplePlane.js | 0 .../{v7.3.2 => v7.0.0}/basic/tinting.js | 0 .../basic/transparentBackground.js | 0 .../{v7.3.2 => v7.0.0}/events/click.js | 0 .../events/customHitarea.js | 0 .../events/customMouseIcon.js | 0 .../{v7.3.2 => v7.0.0}/events/dragging.js | 0 .../events/hitTestingWithSpatialHash.js | 0 .../events/interactivity.js | 0 .../{v7.3.2 => v7.0.0}/events/logger.js | 0 .../events/nestedBoundaryWithProjection.js | 0 .../events/pointerTracker.js | 0 .../{v7.3.2 => v7.0.0}/events/slider.js | 0 .../{v7.3.2 => v7.0.0}/examplesData.json | 0 .../filtersAdvanced/custom.js | 0 .../filtersAdvanced/mouseBlending.js | 0 .../shaderToyFilterRenderTexture.js | 0 .../{v7.3.2 => v7.0.0}/filtersBasic/blur.js | 0 .../filtersBasic/colorMatrix.js | 0 .../filtersBasic/displacementMapCrawlies.js | 0 .../filtersBasic/displacementMapFlag.js | 0 .../{v7.3.2 => v7.0.0}/graphics/advanced.js | 0 .../{v7.3.2 => v7.0.0}/graphics/dynamic.js | 0 .../{v7.3.2 => v7.0.0}/graphics/simple.js | 0 src/examples/{v7.3.2 => v7.0.0}/index.ts | 0 .../{v7.3.2 => v7.0.0}/masks/filter.js | 0 .../{v7.3.2 => v7.0.0}/masks/graphics.js | 0 .../{v7.3.2 => v7.0.0}/masks/sprite.js | 0 .../meshAndShaders/instancedGeometry.js | 0 .../meshAndShaders/interleavingGeometry.js | 0 .../meshAndShaders/mergingGeometry.js | 0 .../multiPassShaderGeneratedMesh.js | 0 .../meshAndShaders/shaderToyMesh.js | 0 .../meshAndShaders/sharedShader.js | 0 .../meshAndShaders/sharingGeometry.js | 0 .../meshAndShaders/texturedMeshAdvanced.js | 0 .../meshAndShaders/texturedMeshBasic.js | 0 .../meshAndShaders/triangle.js | 0 .../meshAndShaders/triangleColor.js | 0 .../meshAndShaders/triangleTextured.js | 0 .../meshAndShaders/uniforms.js | 0 .../offscreenCanvas/basic.js | 0 .../offscreenCanvas/webWorker.js | 0 .../sprite/animatedSpriteAnimationSpeed.js | 0 .../sprite/animatedSpriteExplosion.js | 0 .../sprite/animatedSpriteJet.js | 0 .../{v7.3.2 => v7.0.0}/sprite/basic.js | 0 .../{v7.3.2 => v7.0.0}/sprite/textureSwap.js | 0 .../{v7.3.2 => v7.0.0}/sprite/tilingSprite.js | 0 .../{v7.3.2 => v7.0.0}/sprite/video.js | 0 .../{v7.3.2 => v7.0.0}/text/bitmapText.js | 0 .../{v7.3.2 => v7.0.0}/text/fromFont.js | 0 .../{v7.3.2 => v7.0.0}/text/pixiText.js | 0 .../{v7.3.2 => v7.0.0}/text/webFont.js | 0 .../textures/gradientBasic.js | 0 .../textures/gradientResource.js | 0 .../textures/renderTextureAdvanced.js | 0 .../textures/renderTextureBasic.js | 0 .../textures/textureRotate.js | 0 .../v8.0.0-rc/advanced/collisionDetection.js | 179 -------- src/examples/v8.0.0-rc/advanced/mouseTrail.js | 101 ----- .../v8.0.0-rc/advanced/scratchCard.js | 83 ---- src/examples/v8.0.0-rc/advanced/screenShot.js | 58 --- src/examples/v8.0.0-rc/advanced/spinners.js | 427 ------------------ src/examples/v8.0.0-rc/advanced/starWarp.js | 89 ---- src/examples/v8.0.0-rc/assets/async.js | 26 -- src/examples/v8.0.0-rc/assets/background.js | 37 -- src/examples/v8.0.0-rc/assets/multiple.js | 32 -- src/examples/v8.0.0-rc/assets/promise.js | 24 - src/examples/v8.0.0-rc/basic/blendModes.js | 92 ---- src/examples/v8.0.0-rc/basic/cacheAsBitmap.js | 73 --- src/examples/v8.0.0-rc/basic/container.js | 39 -- .../v8.0.0-rc/basic/particleContainer.js | 102 ----- src/examples/v8.0.0-rc/basic/simplePlane.js | 32 -- src/examples/v8.0.0-rc/basic/tinting.js | 85 ---- .../v8.0.0-rc/basic/transparentBackground.js | 23 - src/examples/v8.0.0-rc/events/click.js | 36 -- .../v8.0.0-rc/events/customHitarea.js | 116 ----- .../v8.0.0-rc/events/customMouseIcon.js | 104 ----- src/examples/v8.0.0-rc/events/dragging.js | 81 ---- .../v8.0.0-rc/events/interactivity.js | 111 ----- src/examples/v8.0.0-rc/events/logger.js | 86 ---- .../events/nestedBoundaryWithProjection.js | 231 ---------- .../v8.0.0-rc/events/pointerTracker.js | 34 -- src/examples/v8.0.0-rc/events/slider.js | 84 ---- .../v8.0.0-rc/filtersAdvanced/custom.js | 47 -- .../filtersAdvanced/mouseBlending.js | 58 --- .../shaderToyFilterRenderTexture.js | 116 ----- src/examples/v8.0.0-rc/filtersBasic/blur.js | 42 -- .../v8.0.0-rc/filtersBasic/colorMatrix.js | 90 ---- .../filtersBasic/displacementMapCrawlies.js | 111 ----- .../filtersBasic/displacementMapFlag.js | 46 -- src/examples/v8.0.0-rc/graphics/advanced.js | 105 ----- src/examples/v8.0.0-rc/graphics/dynamic.js | 98 ---- src/examples/v8.0.0-rc/graphics/simple.js | 99 ---- src/examples/v8.0.0-rc/masks/filter.js | 42 -- src/examples/v8.0.0-rc/masks/graphics.js | 100 ---- src/examples/v8.0.0-rc/masks/sprite.js | 46 -- .../meshAndShaders/instancedGeometry.js | 76 ---- .../meshAndShaders/interleavingGeometry.js | 86 ---- .../meshAndShaders/mergingGeometry.js | 114 ----- .../multiPassShaderGeneratedMesh.js | 235 ---------- .../v8.0.0-rc/meshAndShaders/shaderToyMesh.js | 155 ------- .../v8.0.0-rc/meshAndShaders/sharedShader.js | 124 ----- .../meshAndShaders/sharingGeometry.js | 104 ----- .../meshAndShaders/texturedMeshAdvanced.js | 64 --- .../meshAndShaders/texturedMeshBasic.js | 43 -- .../v8.0.0-rc/meshAndShaders/triangle.js | 40 -- .../v8.0.0-rc/meshAndShaders/triangleColor.js | 77 ---- .../meshAndShaders/triangleTextured.js | 100 ---- .../v8.0.0-rc/meshAndShaders/uniforms.js | 92 ---- .../v8.0.0-rc/offscreenCanvas/basic.js | 44 -- .../sprite/animatedSpriteAnimationSpeed.js | 47 -- .../sprite/animatedSpriteExplosion.js | 36 -- .../v8.0.0-rc/sprite/animatedSpriteJet.js | 40 -- src/examples/v8.0.0-rc/sprite/basic.js | 26 -- src/examples/v8.0.0-rc/sprite/textureSwap.js | 38 -- src/examples/v8.0.0-rc/sprite/tilingSprite.js | 29 -- src/examples/v8.0.0-rc/sprite/video.js | 53 --- src/examples/v8.0.0-rc/text/bitmapText.js | 19 - src/examples/v8.0.0-rc/text/fromFont.js | 29 -- src/examples/v8.0.0-rc/text/pixiText.js | 62 --- .../v8.0.0-rc/textures/gradientBasic.js | 43 -- .../v8.0.0-rc/textures/gradientResource.js | 72 --- .../textures/renderTextureAdvanced.js | 96 ---- .../v8.0.0-rc/textures/renderTextureBasic.js | 48 -- .../v8.0.0-rc/textures/textureRotate.js | 65 --- .../v8.0.0/advanced/collisionDetection.js | 194 ++++++++ src/examples/v8.0.0/advanced/mouseTrail.js | 111 +++++ src/examples/v8.0.0/advanced/scratchCard.js | 86 ++++ src/examples/v8.0.0/advanced/screenShot.js | 71 +++ .../{v8.0.0-rc => v8.0.0}/advanced/slots.js | 207 +++++---- src/examples/v8.0.0/advanced/spinners.js | 422 +++++++++++++++++ src/examples/v8.0.0/advanced/starWarp.js | 97 ++++ src/examples/v8.0.0/assets/async.js | 31 ++ src/examples/v8.0.0/assets/background.js | 43 ++ .../{v8.0.0-rc => v8.0.0}/assets/bundle.js | 43 +- src/examples/v8.0.0/assets/multiple.js | 37 ++ src/examples/v8.0.0/assets/promise.js | 32 ++ src/examples/v8.0.0/basic/blendModes.js | 104 +++++ src/examples/v8.0.0/basic/container.js | 47 ++ src/examples/v8.0.0/basic/fillGradient.js | 56 +++ src/examples/v8.0.0/basic/meshPlane.js | 41 ++ .../v8.0.0/basic/particleContainer.js | 108 +++++ src/examples/v8.0.0/basic/tinting.js | 98 ++++ .../v8.0.0/basic/transparentBackground.js | 35 ++ src/examples/v8.0.0/events/click.js | 48 ++ src/examples/v8.0.0/events/customHitarea.js | 131 ++++++ src/examples/v8.0.0/events/customMouseIcon.js | 121 +++++ src/examples/v8.0.0/events/dragging.js | 87 ++++ .../events/hitTestingWithSpatialHash.js | 0 src/examples/v8.0.0/events/interactivity.js | 127 ++++++ src/examples/v8.0.0/events/logger.js | 93 ++++ .../events/nestedBoundaryWithProjection.js | 230 ++++++++++ src/examples/v8.0.0/events/pointerTracker.js | 32 ++ src/examples/v8.0.0/events/slider.js | 95 ++++ .../{v8.0.0-rc => v8.0.0}/examplesData.json | 9 +- src/examples/v8.0.0/filtersAdvanced/custom.js | 58 +++ .../v8.0.0/filtersAdvanced/mouseBlending.js | 72 +++ .../shaderToyFilterRenderTexture.js | 125 +++++ src/examples/v8.0.0/filtersBasic/blur.js | 60 +++ .../v8.0.0/filtersBasic/colorMatrix.js | 113 +++++ .../filtersBasic/displacementMapCrawlies.js | 129 ++++++ .../filtersBasic/displacementMapFlag.js | 60 +++ src/examples/v8.0.0/graphics/advanced.js | 113 +++++ src/examples/v8.0.0/graphics/dynamic.js | 99 ++++ src/examples/v8.0.0/graphics/simple.js | 89 ++++ src/examples/{v8.0.0-rc => v8.0.0}/index.ts | 14 +- src/examples/v8.0.0/masks/filter.js | 54 +++ src/examples/v8.0.0/masks/graphics.js | 119 +++++ src/examples/v8.0.0/masks/sprite.js | 62 +++ .../meshAndShaders/instancedGeometry.js | 84 ++++ .../v8.0.0/meshAndShaders/mergingGeometry.js | 83 ++++ .../multiPassShaderGeneratedMesh.js | 243 ++++++++++ .../v8.0.0/meshAndShaders/shaderToyMesh.js | 166 +++++++ .../v8.0.0/meshAndShaders/sharedShader.js | 117 +++++ .../v8.0.0/meshAndShaders/sharingGeometry.js | 98 ++++ .../meshAndShaders/texturedMeshAdvanced.js | 75 +++ .../meshAndShaders/texturedMeshBasic.js | 55 +++ .../v8.0.0/meshAndShaders/triangle.js | 47 ++ .../v8.0.0/meshAndShaders/triangleColor.js | 60 +++ .../v8.0.0/meshAndShaders/triangleTextured.js | 76 ++++ .../v8.0.0/meshAndShaders/uniforms.js | 78 ++++ src/examples/v8.0.0/offscreenCanvas/basic.js | 52 +++ .../offscreenCanvas/webWorker.js | 0 .../sprite/animatedSpriteAnimationSpeed.js | 55 +++ .../v8.0.0/sprite/animatedSpriteExplosion.js | 45 ++ .../v8.0.0/sprite/animatedSpriteJet.js | 48 ++ src/examples/v8.0.0/sprite/basic.js | 37 ++ src/examples/v8.0.0/sprite/textureSwap.js | 47 ++ src/examples/v8.0.0/sprite/tilingSprite.js | 42 ++ src/examples/v8.0.0/sprite/video.js | 60 +++ src/examples/v8.0.0/text/bitmapText.js | 31 ++ src/examples/v8.0.0/text/fromFont.js | 38 ++ src/examples/v8.0.0/text/pixiText.js | 86 ++++ .../{v8.0.0-rc => v8.0.0}/text/webFont.js | 19 +- .../v8.0.0/textures/renderTextureAdvanced.js | 108 +++++ .../v8.0.0/textures/renderTextureBasic.js | 57 +++ src/examples/v8.0.0/textures/textureRotate.js | 85 ++++ src/theme/Footer/index.js | 4 +- src/theme/Navbar/Content/index.js | 17 +- src/tutorials/index.ts | 27 +- .../gettingStarted/index.ts | 0 .../gettingStarted/step1-code.js | 0 .../gettingStarted/step1-content.md | 0 .../gettingStarted/step2-code.js | 0 .../gettingStarted/step2-completed-code.js | 0 .../gettingStarted/step2-content.md | 0 .../gettingStarted/step3-code.js | 0 .../gettingStarted/step3-completed-code.js | 0 .../gettingStarted/step3-content.md | 0 .../gettingStarted/step4-code.js | 0 .../gettingStarted/step4-content.md | 0 src/tutorials/{v7.3.2 => v7.0.0}/index.ts | 0 .../{v7.3.2 => v7.0.0}/tutorialsData.json | 0 .../gettingStarted/index.ts | 0 .../gettingStarted/step1-code.js | 0 .../gettingStarted/step1-content.md | 0 .../gettingStarted/step2-code.js | 0 .../gettingStarted/step2-completed-code.js | 0 .../gettingStarted/step2-content.md | 0 .../gettingStarted/step3-code.js | 0 .../gettingStarted/step3-completed-code.js | 0 .../gettingStarted/step3-content.md | 0 .../gettingStarted/step4-code.js | 0 .../gettingStarted/step4-content.md | 0 src/tutorials/{v8.0.0-rc => v8.0.0}/index.ts | 0 .../{v8.0.0-rc => v8.0.0}/tutorialsData.json | 0 .../guides/basics/getting-started.md | 6 +- .../guides/components/containers.md | 2 +- .../guides/components/graphics.md | 4 +- .../guides/components/interaction.md | 2 +- .../guides/components/sprites.md | 2 +- .../version-7.3.2/guides/components/text.md | 4 +- .../guides/components/textures.md | 2 +- 270 files changed, 6023 insertions(+), 5639 deletions(-) rename src/examples/{v7.3.2 => v7.0.0}/advanced/collisionDetection.js (100%) rename src/examples/{v7.3.2 => v7.0.0}/advanced/mouseTrail.js (100%) rename src/examples/{v7.3.2 => v7.0.0}/advanced/scratchCard.js (100%) rename src/examples/{v7.3.2 => v7.0.0}/advanced/screenShot.js (100%) rename src/examples/{v7.3.2 => v7.0.0}/advanced/slots.js (100%) rename src/examples/{v7.3.2 => v7.0.0}/advanced/spinners.js (100%) rename src/examples/{v7.3.2 => v7.0.0}/advanced/starWarp.js (100%) rename src/examples/{v7.3.2 => v7.0.0}/assets/async.js (100%) rename src/examples/{v7.3.2 => v7.0.0}/assets/background.js (100%) rename src/examples/{v7.3.2 => v7.0.0}/assets/bundle.js (100%) rename src/examples/{v7.3.2 => v7.0.0}/assets/multiple.js (100%) rename src/examples/{v7.3.2 => v7.0.0}/assets/promise.js (100%) rename src/examples/{v7.3.2 => v7.0.0}/basic/blendModes.js (100%) rename src/examples/{v7.3.2 => v7.0.0}/basic/cacheAsBitmap.js (100%) rename src/examples/{v7.3.2 => v7.0.0}/basic/container.js (100%) rename src/examples/{v7.3.2 => v7.0.0}/basic/particleContainer.js (100%) rename src/examples/{v7.3.2 => v7.0.0}/basic/simplePlane.js (100%) rename src/examples/{v7.3.2 => v7.0.0}/basic/tinting.js (100%) rename src/examples/{v7.3.2 => v7.0.0}/basic/transparentBackground.js (100%) rename src/examples/{v7.3.2 => v7.0.0}/events/click.js (100%) rename src/examples/{v7.3.2 => v7.0.0}/events/customHitarea.js (100%) rename src/examples/{v7.3.2 => v7.0.0}/events/customMouseIcon.js (100%) rename src/examples/{v7.3.2 => v7.0.0}/events/dragging.js (100%) rename src/examples/{v7.3.2 => v7.0.0}/events/hitTestingWithSpatialHash.js (100%) rename src/examples/{v7.3.2 => v7.0.0}/events/interactivity.js (100%) rename src/examples/{v7.3.2 => v7.0.0}/events/logger.js (100%) rename src/examples/{v7.3.2 => v7.0.0}/events/nestedBoundaryWithProjection.js (100%) rename src/examples/{v7.3.2 => v7.0.0}/events/pointerTracker.js (100%) rename src/examples/{v7.3.2 => v7.0.0}/events/slider.js (100%) rename src/examples/{v7.3.2 => v7.0.0}/examplesData.json (100%) rename src/examples/{v7.3.2 => v7.0.0}/filtersAdvanced/custom.js (100%) rename src/examples/{v7.3.2 => v7.0.0}/filtersAdvanced/mouseBlending.js (100%) rename src/examples/{v7.3.2 => v7.0.0}/filtersAdvanced/shaderToyFilterRenderTexture.js (100%) rename src/examples/{v7.3.2 => v7.0.0}/filtersBasic/blur.js (100%) rename src/examples/{v7.3.2 => v7.0.0}/filtersBasic/colorMatrix.js (100%) rename src/examples/{v7.3.2 => v7.0.0}/filtersBasic/displacementMapCrawlies.js (100%) rename src/examples/{v7.3.2 => v7.0.0}/filtersBasic/displacementMapFlag.js (100%) rename src/examples/{v7.3.2 => v7.0.0}/graphics/advanced.js (100%) rename src/examples/{v7.3.2 => v7.0.0}/graphics/dynamic.js (100%) rename src/examples/{v7.3.2 => v7.0.0}/graphics/simple.js (100%) rename src/examples/{v7.3.2 => v7.0.0}/index.ts (100%) rename src/examples/{v7.3.2 => v7.0.0}/masks/filter.js (100%) rename src/examples/{v7.3.2 => v7.0.0}/masks/graphics.js (100%) rename src/examples/{v7.3.2 => v7.0.0}/masks/sprite.js (100%) rename src/examples/{v7.3.2 => v7.0.0}/meshAndShaders/instancedGeometry.js (100%) rename src/examples/{v7.3.2 => v7.0.0}/meshAndShaders/interleavingGeometry.js (100%) rename src/examples/{v7.3.2 => v7.0.0}/meshAndShaders/mergingGeometry.js (100%) rename src/examples/{v7.3.2 => v7.0.0}/meshAndShaders/multiPassShaderGeneratedMesh.js (100%) rename src/examples/{v7.3.2 => v7.0.0}/meshAndShaders/shaderToyMesh.js (100%) rename src/examples/{v7.3.2 => v7.0.0}/meshAndShaders/sharedShader.js (100%) rename src/examples/{v7.3.2 => v7.0.0}/meshAndShaders/sharingGeometry.js (100%) rename src/examples/{v7.3.2 => v7.0.0}/meshAndShaders/texturedMeshAdvanced.js (100%) rename src/examples/{v7.3.2 => v7.0.0}/meshAndShaders/texturedMeshBasic.js (100%) rename src/examples/{v7.3.2 => v7.0.0}/meshAndShaders/triangle.js (100%) rename src/examples/{v7.3.2 => v7.0.0}/meshAndShaders/triangleColor.js (100%) rename src/examples/{v7.3.2 => v7.0.0}/meshAndShaders/triangleTextured.js (100%) rename src/examples/{v7.3.2 => v7.0.0}/meshAndShaders/uniforms.js (100%) rename src/examples/{v7.3.2 => v7.0.0}/offscreenCanvas/basic.js (100%) rename src/examples/{v7.3.2 => v7.0.0}/offscreenCanvas/webWorker.js (100%) rename src/examples/{v7.3.2 => v7.0.0}/sprite/animatedSpriteAnimationSpeed.js (100%) rename src/examples/{v7.3.2 => v7.0.0}/sprite/animatedSpriteExplosion.js (100%) rename src/examples/{v7.3.2 => v7.0.0}/sprite/animatedSpriteJet.js (100%) rename src/examples/{v7.3.2 => v7.0.0}/sprite/basic.js (100%) rename src/examples/{v7.3.2 => v7.0.0}/sprite/textureSwap.js (100%) rename src/examples/{v7.3.2 => v7.0.0}/sprite/tilingSprite.js (100%) rename src/examples/{v7.3.2 => v7.0.0}/sprite/video.js (100%) rename src/examples/{v7.3.2 => v7.0.0}/text/bitmapText.js (100%) rename src/examples/{v7.3.2 => v7.0.0}/text/fromFont.js (100%) rename src/examples/{v7.3.2 => v7.0.0}/text/pixiText.js (100%) rename src/examples/{v7.3.2 => v7.0.0}/text/webFont.js (100%) rename src/examples/{v7.3.2 => v7.0.0}/textures/gradientBasic.js (100%) rename src/examples/{v7.3.2 => v7.0.0}/textures/gradientResource.js (100%) rename src/examples/{v7.3.2 => v7.0.0}/textures/renderTextureAdvanced.js (100%) rename src/examples/{v7.3.2 => v7.0.0}/textures/renderTextureBasic.js (100%) rename src/examples/{v7.3.2 => v7.0.0}/textures/textureRotate.js (100%) delete mode 100644 src/examples/v8.0.0-rc/advanced/collisionDetection.js delete mode 100644 src/examples/v8.0.0-rc/advanced/mouseTrail.js delete mode 100644 src/examples/v8.0.0-rc/advanced/scratchCard.js delete mode 100644 src/examples/v8.0.0-rc/advanced/screenShot.js delete mode 100644 src/examples/v8.0.0-rc/advanced/spinners.js delete mode 100644 src/examples/v8.0.0-rc/advanced/starWarp.js delete mode 100644 src/examples/v8.0.0-rc/assets/async.js delete mode 100644 src/examples/v8.0.0-rc/assets/background.js delete mode 100644 src/examples/v8.0.0-rc/assets/multiple.js delete mode 100644 src/examples/v8.0.0-rc/assets/promise.js delete mode 100644 src/examples/v8.0.0-rc/basic/blendModes.js delete mode 100644 src/examples/v8.0.0-rc/basic/cacheAsBitmap.js delete mode 100644 src/examples/v8.0.0-rc/basic/container.js delete mode 100644 src/examples/v8.0.0-rc/basic/particleContainer.js delete mode 100644 src/examples/v8.0.0-rc/basic/simplePlane.js delete mode 100644 src/examples/v8.0.0-rc/basic/tinting.js delete mode 100644 src/examples/v8.0.0-rc/basic/transparentBackground.js delete mode 100644 src/examples/v8.0.0-rc/events/click.js delete mode 100644 src/examples/v8.0.0-rc/events/customHitarea.js delete mode 100644 src/examples/v8.0.0-rc/events/customMouseIcon.js delete mode 100644 src/examples/v8.0.0-rc/events/dragging.js delete mode 100644 src/examples/v8.0.0-rc/events/interactivity.js delete mode 100644 src/examples/v8.0.0-rc/events/logger.js delete mode 100644 src/examples/v8.0.0-rc/events/nestedBoundaryWithProjection.js delete mode 100644 src/examples/v8.0.0-rc/events/pointerTracker.js delete mode 100644 src/examples/v8.0.0-rc/events/slider.js delete mode 100644 src/examples/v8.0.0-rc/filtersAdvanced/custom.js delete mode 100644 src/examples/v8.0.0-rc/filtersAdvanced/mouseBlending.js delete mode 100644 src/examples/v8.0.0-rc/filtersAdvanced/shaderToyFilterRenderTexture.js delete mode 100644 src/examples/v8.0.0-rc/filtersBasic/blur.js delete mode 100644 src/examples/v8.0.0-rc/filtersBasic/colorMatrix.js delete mode 100644 src/examples/v8.0.0-rc/filtersBasic/displacementMapCrawlies.js delete mode 100644 src/examples/v8.0.0-rc/filtersBasic/displacementMapFlag.js delete mode 100644 src/examples/v8.0.0-rc/graphics/advanced.js delete mode 100644 src/examples/v8.0.0-rc/graphics/dynamic.js delete mode 100644 src/examples/v8.0.0-rc/graphics/simple.js delete mode 100644 src/examples/v8.0.0-rc/masks/filter.js delete mode 100644 src/examples/v8.0.0-rc/masks/graphics.js delete mode 100644 src/examples/v8.0.0-rc/masks/sprite.js delete mode 100644 src/examples/v8.0.0-rc/meshAndShaders/instancedGeometry.js delete mode 100644 src/examples/v8.0.0-rc/meshAndShaders/interleavingGeometry.js delete mode 100644 src/examples/v8.0.0-rc/meshAndShaders/mergingGeometry.js delete mode 100644 src/examples/v8.0.0-rc/meshAndShaders/multiPassShaderGeneratedMesh.js delete mode 100644 src/examples/v8.0.0-rc/meshAndShaders/shaderToyMesh.js delete mode 100644 src/examples/v8.0.0-rc/meshAndShaders/sharedShader.js delete mode 100644 src/examples/v8.0.0-rc/meshAndShaders/sharingGeometry.js delete mode 100644 src/examples/v8.0.0-rc/meshAndShaders/texturedMeshAdvanced.js delete mode 100644 src/examples/v8.0.0-rc/meshAndShaders/texturedMeshBasic.js delete mode 100644 src/examples/v8.0.0-rc/meshAndShaders/triangle.js delete mode 100644 src/examples/v8.0.0-rc/meshAndShaders/triangleColor.js delete mode 100644 src/examples/v8.0.0-rc/meshAndShaders/triangleTextured.js delete mode 100644 src/examples/v8.0.0-rc/meshAndShaders/uniforms.js delete mode 100644 src/examples/v8.0.0-rc/offscreenCanvas/basic.js delete mode 100644 src/examples/v8.0.0-rc/sprite/animatedSpriteAnimationSpeed.js delete mode 100644 src/examples/v8.0.0-rc/sprite/animatedSpriteExplosion.js delete mode 100644 src/examples/v8.0.0-rc/sprite/animatedSpriteJet.js delete mode 100644 src/examples/v8.0.0-rc/sprite/basic.js delete mode 100644 src/examples/v8.0.0-rc/sprite/textureSwap.js delete mode 100644 src/examples/v8.0.0-rc/sprite/tilingSprite.js delete mode 100644 src/examples/v8.0.0-rc/sprite/video.js delete mode 100644 src/examples/v8.0.0-rc/text/bitmapText.js delete mode 100644 src/examples/v8.0.0-rc/text/fromFont.js delete mode 100644 src/examples/v8.0.0-rc/text/pixiText.js delete mode 100644 src/examples/v8.0.0-rc/textures/gradientBasic.js delete mode 100644 src/examples/v8.0.0-rc/textures/gradientResource.js delete mode 100644 src/examples/v8.0.0-rc/textures/renderTextureAdvanced.js delete mode 100644 src/examples/v8.0.0-rc/textures/renderTextureBasic.js delete mode 100644 src/examples/v8.0.0-rc/textures/textureRotate.js create mode 100644 src/examples/v8.0.0/advanced/collisionDetection.js create mode 100644 src/examples/v8.0.0/advanced/mouseTrail.js create mode 100644 src/examples/v8.0.0/advanced/scratchCard.js create mode 100644 src/examples/v8.0.0/advanced/screenShot.js rename src/examples/{v8.0.0-rc => v8.0.0}/advanced/slots.js (50%) create mode 100644 src/examples/v8.0.0/advanced/spinners.js create mode 100644 src/examples/v8.0.0/advanced/starWarp.js create mode 100644 src/examples/v8.0.0/assets/async.js create mode 100644 src/examples/v8.0.0/assets/background.js rename src/examples/{v8.0.0-rc => v8.0.0}/assets/bundle.js (56%) create mode 100644 src/examples/v8.0.0/assets/multiple.js create mode 100644 src/examples/v8.0.0/assets/promise.js create mode 100644 src/examples/v8.0.0/basic/blendModes.js create mode 100644 src/examples/v8.0.0/basic/container.js create mode 100644 src/examples/v8.0.0/basic/fillGradient.js create mode 100644 src/examples/v8.0.0/basic/meshPlane.js create mode 100644 src/examples/v8.0.0/basic/particleContainer.js create mode 100644 src/examples/v8.0.0/basic/tinting.js create mode 100644 src/examples/v8.0.0/basic/transparentBackground.js create mode 100644 src/examples/v8.0.0/events/click.js create mode 100644 src/examples/v8.0.0/events/customHitarea.js create mode 100644 src/examples/v8.0.0/events/customMouseIcon.js create mode 100644 src/examples/v8.0.0/events/dragging.js rename src/examples/{v8.0.0-rc => v8.0.0}/events/hitTestingWithSpatialHash.js (100%) create mode 100644 src/examples/v8.0.0/events/interactivity.js create mode 100644 src/examples/v8.0.0/events/logger.js create mode 100644 src/examples/v8.0.0/events/nestedBoundaryWithProjection.js create mode 100644 src/examples/v8.0.0/events/pointerTracker.js create mode 100644 src/examples/v8.0.0/events/slider.js rename src/examples/{v8.0.0-rc => v8.0.0}/examplesData.json (92%) create mode 100644 src/examples/v8.0.0/filtersAdvanced/custom.js create mode 100644 src/examples/v8.0.0/filtersAdvanced/mouseBlending.js create mode 100644 src/examples/v8.0.0/filtersAdvanced/shaderToyFilterRenderTexture.js create mode 100644 src/examples/v8.0.0/filtersBasic/blur.js create mode 100644 src/examples/v8.0.0/filtersBasic/colorMatrix.js create mode 100644 src/examples/v8.0.0/filtersBasic/displacementMapCrawlies.js create mode 100644 src/examples/v8.0.0/filtersBasic/displacementMapFlag.js create mode 100644 src/examples/v8.0.0/graphics/advanced.js create mode 100644 src/examples/v8.0.0/graphics/dynamic.js create mode 100644 src/examples/v8.0.0/graphics/simple.js rename src/examples/{v8.0.0-rc => v8.0.0}/index.ts (94%) create mode 100644 src/examples/v8.0.0/masks/filter.js create mode 100644 src/examples/v8.0.0/masks/graphics.js create mode 100644 src/examples/v8.0.0/masks/sprite.js create mode 100644 src/examples/v8.0.0/meshAndShaders/instancedGeometry.js create mode 100644 src/examples/v8.0.0/meshAndShaders/mergingGeometry.js create mode 100644 src/examples/v8.0.0/meshAndShaders/multiPassShaderGeneratedMesh.js create mode 100644 src/examples/v8.0.0/meshAndShaders/shaderToyMesh.js create mode 100644 src/examples/v8.0.0/meshAndShaders/sharedShader.js create mode 100644 src/examples/v8.0.0/meshAndShaders/sharingGeometry.js create mode 100644 src/examples/v8.0.0/meshAndShaders/texturedMeshAdvanced.js create mode 100644 src/examples/v8.0.0/meshAndShaders/texturedMeshBasic.js create mode 100644 src/examples/v8.0.0/meshAndShaders/triangle.js create mode 100644 src/examples/v8.0.0/meshAndShaders/triangleColor.js create mode 100644 src/examples/v8.0.0/meshAndShaders/triangleTextured.js create mode 100644 src/examples/v8.0.0/meshAndShaders/uniforms.js create mode 100644 src/examples/v8.0.0/offscreenCanvas/basic.js rename src/examples/{v8.0.0-rc => v8.0.0}/offscreenCanvas/webWorker.js (100%) create mode 100644 src/examples/v8.0.0/sprite/animatedSpriteAnimationSpeed.js create mode 100644 src/examples/v8.0.0/sprite/animatedSpriteExplosion.js create mode 100644 src/examples/v8.0.0/sprite/animatedSpriteJet.js create mode 100644 src/examples/v8.0.0/sprite/basic.js create mode 100644 src/examples/v8.0.0/sprite/textureSwap.js create mode 100644 src/examples/v8.0.0/sprite/tilingSprite.js create mode 100644 src/examples/v8.0.0/sprite/video.js create mode 100644 src/examples/v8.0.0/text/bitmapText.js create mode 100644 src/examples/v8.0.0/text/fromFont.js create mode 100644 src/examples/v8.0.0/text/pixiText.js rename src/examples/{v8.0.0-rc => v8.0.0}/text/webFont.js (67%) create mode 100644 src/examples/v8.0.0/textures/renderTextureAdvanced.js create mode 100644 src/examples/v8.0.0/textures/renderTextureBasic.js create mode 100644 src/examples/v8.0.0/textures/textureRotate.js rename src/tutorials/{v7.3.2 => v7.0.0}/gettingStarted/index.ts (100%) rename src/tutorials/{v7.3.2 => v7.0.0}/gettingStarted/step1-code.js (100%) rename src/tutorials/{v7.3.2 => v7.0.0}/gettingStarted/step1-content.md (100%) rename src/tutorials/{v7.3.2 => v7.0.0}/gettingStarted/step2-code.js (100%) rename src/tutorials/{v7.3.2 => v7.0.0}/gettingStarted/step2-completed-code.js (100%) rename src/tutorials/{v7.3.2 => v7.0.0}/gettingStarted/step2-content.md (100%) rename src/tutorials/{v7.3.2 => v7.0.0}/gettingStarted/step3-code.js (100%) rename src/tutorials/{v7.3.2 => v7.0.0}/gettingStarted/step3-completed-code.js (100%) rename src/tutorials/{v7.3.2 => v7.0.0}/gettingStarted/step3-content.md (100%) rename src/tutorials/{v7.3.2 => v7.0.0}/gettingStarted/step4-code.js (100%) rename src/tutorials/{v7.3.2 => v7.0.0}/gettingStarted/step4-content.md (100%) rename src/tutorials/{v7.3.2 => v7.0.0}/index.ts (100%) rename src/tutorials/{v7.3.2 => v7.0.0}/tutorialsData.json (100%) rename src/tutorials/{v8.0.0-rc => v8.0.0}/gettingStarted/index.ts (100%) rename src/tutorials/{v8.0.0-rc => v8.0.0}/gettingStarted/step1-code.js (100%) rename src/tutorials/{v8.0.0-rc => v8.0.0}/gettingStarted/step1-content.md (100%) rename src/tutorials/{v8.0.0-rc => v8.0.0}/gettingStarted/step2-code.js (100%) rename src/tutorials/{v8.0.0-rc => v8.0.0}/gettingStarted/step2-completed-code.js (100%) rename src/tutorials/{v8.0.0-rc => v8.0.0}/gettingStarted/step2-content.md (100%) rename src/tutorials/{v8.0.0-rc => v8.0.0}/gettingStarted/step3-code.js (100%) rename src/tutorials/{v8.0.0-rc => v8.0.0}/gettingStarted/step3-completed-code.js (100%) rename src/tutorials/{v8.0.0-rc => v8.0.0}/gettingStarted/step3-content.md (100%) rename src/tutorials/{v8.0.0-rc => v8.0.0}/gettingStarted/step4-code.js (100%) rename src/tutorials/{v8.0.0-rc => v8.0.0}/gettingStarted/step4-content.md (100%) rename src/tutorials/{v8.0.0-rc => v8.0.0}/index.ts (100%) rename src/tutorials/{v8.0.0-rc => v8.0.0}/tutorialsData.json (100%) diff --git a/.gitignore b/.gitignore index f9c3e28dd..719e04c49 100644 --- a/.gitignore +++ b/.gitignore @@ -22,4 +22,6 @@ yarn-error.log* .idea .eslintcache -scripts/pixiVersions.json \ No newline at end of file +scripts/pixiVersions.json + +.ghtoken \ No newline at end of file diff --git a/docs/guides/basics/getting-started.md b/docs/guides/basics/getting-started.md index 8c84ec24d..a58391bb2 100644 --- a/docs/guides/basics/getting-started.md +++ b/docs/guides/basics/getting-started.md @@ -91,7 +91,7 @@ What we're doing here is adding a JavaScript code block, and in that block creat When the PIXI.Application class creates the renderer, it builds a Canvas element that it will render *to*. In order to see what we draw with PixiJS, we need to add this Canvas element to the web page's DOM. Append the following line to your page's script block: -```JavaScript +```javascript document.body.appendChild(app.view); ``` @@ -105,7 +105,7 @@ There are a number of ways to draw images in PixiJS, but the simplest is by usin Before PixiJS can render an image, it needs to be loaded. Just like in any web page, image loading happens asynchronously. We'll talk a lot more about resource loading in later guides. For now, we can use a helper method on the PIXI.Sprite class to handle the image loading for us: -```JavaScript +```javascript // Magically load the PNG asynchronously let sprite = PIXI.Sprite.from('sample.png'); ``` @@ -116,7 +116,7 @@ Before PixiJS can render an image, it needs to be loaded. Just like in any web Finally, we need to add our new sprite to the stage. The stage is simply a [Container](https://pixijs.download/release/docs/PIXI.Container.html) that is the root of the scene graph. Every child of the stage container will be rendered every frame. By adding our sprite to the stage, we tell PixiJS's renderer we want to draw it. -```JavaScript +```javascript app.stage.addChild(sprite); ``` diff --git a/docs/guides/components/containers.md b/docs/guides/components/containers.md index c4bd5de39..9839140c0 100644 --- a/docs/guides/components/containers.md +++ b/docs/guides/components/containers.md @@ -10,7 +10,7 @@ However, it's a good idea _not_ to do this. Standalone Container objects are ** So that's the primary use for Containers - as groups of renderable objects in a hierarchy. -Check out the [container example code](/examples/basic/container). +Check out the [container example code](../../examples/basic/container). ## Masking diff --git a/docs/guides/components/graphics.md b/docs/guides/components/graphics.md index 5c1e0c73b..236e11946 100644 --- a/docs/guides/components/graphics.md +++ b/docs/guides/components/graphics.md @@ -4,7 +4,7 @@ In this guide, we're going to de-mystify the Graphics object, starting with how to think about what it does. -Check out the [graphics example code](/examples/graphics/simple). +Check out the [graphics example code](../../examples/graphics/simple). ## Graphics Is About Building - Not Drawing @@ -83,7 +83,7 @@ Doing so is simple. Create the object, call the various builder functions to ad You can also use a Graphics object as a complex mask. To do so, build your object and primitives as usual. Next create a PIXI.Container object that will contain the masked content, and set its `mask` property to your Graphics object. The children of the container will now be clipped to only show through inside the geometry you've created. This technique works for both WebGL and Canvas-based rendering. -Check out the [masking example code](/examples/graphics/simple). +Check out the [masking example code](../../examples/graphics/simple). ## Caveats and Gotchas diff --git a/docs/guides/components/interaction.md b/docs/guides/components/interaction.md index 3aa113495..7d98df968 100644 --- a/docs/guides/components/interaction.md +++ b/docs/guides/components/interaction.md @@ -59,7 +59,7 @@ PixiJS supports the following event types: Any DisplayObject-derived object (Sprite, Container, etc.) can become interactive simply by setting its `eventMode` property to any of the eventModes listed above. Doing so will cause the object to emit interaction events that can be responded to in order to drive your project's behavior. -Check out the [interaction example code](/examples/events/click). +Check out the [interaction example code](../../examples/events/click). To respond to clicks and taps, bind to the events fired on the object, like so: diff --git a/docs/guides/components/sprites.md b/docs/guides/components/sprites.md index db495b6b3..92ef5bb77 100644 --- a/docs/guides/components/sprites.md +++ b/docs/guides/components/sprites.md @@ -6,7 +6,7 @@ Sprites are the simplest and most common renderable object in PixiJS. They repr To create a Sprite, all you need is a Texture (check out the Texture guide). Load a PNG's URL using the PIXI.Loader class, then call `PIXI.Sprite.from(url)` and you're all set. As a convenience during prototyping, you can pass a non-loaded URL to `from()` and PixiJS will handle it, but your sprite will "pop in" after it loads if you don't pre-load your textures. -Check out the [sprite example code](/examples/sprite/basic). +Check out the [sprite example code](../../examples/sprite/basic). ## Using Sprites diff --git a/docs/guides/components/text.md b/docs/guides/components/text.md index d7a1b53c1..caf4aab69 100644 --- a/docs/guides/components/text.md +++ b/docs/guides/components/text.md @@ -14,7 +14,7 @@ In order to draw text to the screen, you use a [Text](https://pixijs.download/re So when working with PIXI.Text objects, there are two sets of options - standard display object options like position, rotation, etc that work *after* the text is rasterized internally, and text style options that are used *while* rasterizing. Because text once rendered is basically just a sprite, there's no need to review the standard options. Instead, let's focus on how text is styled. -Check out the [text example code](/examples/text/pixi-text). +Check out the [text example code](../../examples/text/pixi-text). ## Text Styles @@ -80,7 +80,7 @@ In addition to the standard PIXI.Text approach to adding text to your project, P The primary advantage of this approach is speed - changing text frequently is much cheaper and rendering each additional piece of text is much faster due to the shared source texture. -Check out the [bitmap text example code](/examples/text/bitmap-text). +Check out the [bitmap text example code](../../examples/text/bitmap-text). ## BitmapFont diff --git a/docs/guides/components/textures.md b/docs/guides/components/textures.md index 492cf2f8c..0dd4e38c9 100644 --- a/docs/guides/components/textures.md +++ b/docs/guides/components/textures.md @@ -72,4 +72,4 @@ RenderTexture: A more advanced (but very powerful!) feature is to build a Textur Each of these texture sources has caveats and nuances that we can't cover in this guide, but they should give you a feeling for the power of PixiJS's texture system. -Check out the [render texture example code](/examples/textures/render-texture-basic). +Check out the [render texture example code](../../examples/textures/render-texture-basic). diff --git a/docs/pixi-version.json b/docs/pixi-version.json index 5e1f9c3b2..c9600903d 100644 --- a/docs/pixi-version.json +++ b/docs/pixi-version.json @@ -1,10 +1,10 @@ { "versionLabel": "prerelease-v8", - "version": "8.0.0-rc", - "releaseNotes": "https://github.com/pixijs/pixijs/releases/tag/v8.0.0-rc", - "build": "https://pixijs.download/v8.0.0-rc/pixi.min.js", - "docs": "https://pixijs.download/v8.0.0-rc/docs/index.html", - "npm": "8.0.0-rc", + "version": "8.0.0-rc.3", + "releaseNotes": "https://github.com/pixijs/pixijs/releases/tag/v8.0.0-rc.3", + "build": "https://pixijs.download/v8.0.0-rc.3/pixi.min.js", + "docs": "https://pixijs.download/v8.0.0-rc.3/docs/index.html", + "npm": "8.0.0-rc.3", "prerelease": true, "latest": false } diff --git a/docusaurus.config.js b/docusaurus.config.js index 6e2dac826..4d7bab02d 100644 --- a/docusaurus.config.js +++ b/docusaurus.config.js @@ -46,10 +46,14 @@ const config = { '7.3.2': { label: 'v7.x (Latest)', path: '7.3.2', + banner: 'none', + badge: false, }, current: { label: 'prerelease-v8', + banner: 'none', + badge: false, }, }, }, diff --git a/package-lock.json b/package-lock.json index b5e989bdb..f58f0f500 100644 --- a/package-lock.json +++ b/package-lock.json @@ -49,6 +49,7 @@ "lint-staged": "^13.2.0", "prettier": "^2.8.4", "recast": "^0.23.4", + "semver": "^7.5.4", "typescript": "^4.9.4" }, "engines": { @@ -16134,9 +16135,9 @@ } }, "node_modules/semver": { - "version": "7.3.8", - "resolved": "https://registry.npmjs.org/semver/-/semver-7.3.8.tgz", - "integrity": "sha512-NB1ctGL5rlHrPJtFDVIVzTyQylMLu9N9VICA6HSFJo8MCGVTMW6gfpicwKmmK/dAjTOrqu5l63JJOpDSrAis3A==", + "version": "7.5.4", + "resolved": "https://registry.npmjs.org/semver/-/semver-7.5.4.tgz", + "integrity": "sha512-1bCSESV6Pv+i21Hvpxp3Dx+pSD8lIPt8uVjRrxAUt/nbswYc+tK6Y2btiULjd4+fnq15PX+nqQDC7Oft7WkwcA==", "dependencies": { "lru-cache": "^6.0.0" }, @@ -30776,9 +30777,9 @@ } }, "semver": { - "version": "7.3.8", - "resolved": "https://registry.npmjs.org/semver/-/semver-7.3.8.tgz", - "integrity": "sha512-NB1ctGL5rlHrPJtFDVIVzTyQylMLu9N9VICA6HSFJo8MCGVTMW6gfpicwKmmK/dAjTOrqu5l63JJOpDSrAis3A==", + "version": "7.5.4", + "resolved": "https://registry.npmjs.org/semver/-/semver-7.5.4.tgz", + "integrity": "sha512-1bCSESV6Pv+i21Hvpxp3Dx+pSD8lIPt8uVjRrxAUt/nbswYc+tK6Y2btiULjd4+fnq15PX+nqQDC7Oft7WkwcA==", "requires": { "lru-cache": "^6.0.0" } diff --git a/package.json b/package.json index 78bc9b05e..6f7a63f72 100644 --- a/package.json +++ b/package.json @@ -97,6 +97,7 @@ "lint-staged": "^13.2.0", "prettier": "^2.8.4", "recast": "^0.23.4", + "semver": "^7.5.4", "typescript": "^4.9.4" }, "engines": { diff --git a/pixi-versions.json b/pixi-versions.json index b3ee5f1ac..5c2cd0c3b 100644 --- a/pixi-versions.json +++ b/pixi-versions.json @@ -12,11 +12,11 @@ }, { "versionLabel": "prerelease-v8", - "version": "8.0.0-rc", - "releaseNotes": "https://github.com/pixijs/pixijs/releases/tag/v8.0.0-rc", - "build": "https://pixijs.download/v8.0.0-rc/pixi.min.js", - "docs": "https://pixijs.download/v8.0.0-rc/docs/index.html", - "npm": "8.0.0-rc", + "version": "8.0.0-rc.3", + "releaseNotes": "https://github.com/pixijs/pixijs/releases/tag/v8.0.0-rc.3", + "build": "https://pixijs.download/v8.0.0-rc.3/pixi.min.js", + "docs": "https://pixijs.download/v8.0.0-rc.3/docs/index.html", + "npm": "8.0.0-rc.3", "prerelease": true, "latest": false, "isCurrent": true diff --git a/scripts/generate-example-docs.js b/scripts/generate-example-docs.js index 8c864fa54..e6cd34a5a 100755 --- a/scripts/generate-example-docs.js +++ b/scripts/generate-example-docs.js @@ -1,6 +1,7 @@ #!/usr/bin/env node const { join, resolve, dirname } = require('path'); -const { mkdirSync, readFileSync, rmSync, writeFileSync } = require('fs'); +const { mkdirSync, readFileSync, rmSync, writeFileSync, readdirSync } = require('fs'); +const { valid, lte, rcompare, prerelease, major, minor, patch } = require('semver'); const glob = require('glob'); const ROOT = resolve(__dirname, '..'); @@ -21,6 +22,12 @@ async function go() { // Find all pixi-version.json files const versionFiles = glob.sync(`${ROOT}/**/pixi-version.json`); + const EXAMPLES_PATH = resolve(ROOT, 'src', 'examples'); + + // Read the directories in the examples directory + const exampleDirectories = readdirSync(EXAMPLES_PATH, { withFileTypes: true }) + .filter((dirent) => dirent.isDirectory()) + .map((dirent) => dirent.name); // Perform the script on all the directories that they are in for (const versionFile of versionFiles) @@ -29,7 +36,19 @@ async function go() const EXAMPLES_MD_PATH = resolve(DOCS_PATH, 'examples'); const pixiVersion = require(versionFile); const VERSION = pixiVersion.version; - const EXAMPLES_JS_PATH = resolve(ROOT, 'src', 'examples', `v${VERSION}`); + const isPrerelease = prerelease(`v${VERSION}`); + const versionToCompare = isPrerelease ? `v${major(VERSION)}.${minor(VERSION)}.${patch(VERSION)}` : `v${VERSION}`; + + // Filter and sort the directories to find the best match + const bestMatch = exampleDirectories + // eslint-disable-next-line no-loop-func + .filter((name) => valid(name) && lte(name, versionToCompare)) + .sort((a, b) => rcompare(a, b))[0]; + + console.log(`Generating examples for v${VERSION} using the ${bestMatch} source`); + + const EXAMPLES_JS_PATH = resolve(EXAMPLES_PATH, bestMatch); + const examplesData = require(`${EXAMPLES_JS_PATH}/examplesData.json`); const directories = Object.keys(examplesData); diff --git a/scripts/generate-tutorial-docs.js b/scripts/generate-tutorial-docs.js index f09b2cf3c..3699292ee 100755 --- a/scripts/generate-tutorial-docs.js +++ b/scripts/generate-tutorial-docs.js @@ -1,6 +1,7 @@ #!/usr/bin/env node const { join, resolve, dirname } = require('path'); const { readdirSync, mkdirSync, readFileSync, rmSync, writeFileSync } = require('fs'); +const { valid, lte, rcompare, prerelease, major, minor, patch } = require('semver'); const glob = require('glob'); const ROOT = resolve(__dirname, '..'); @@ -21,6 +22,12 @@ async function go() { // Find all pixi-version.json files const versionFiles = glob.sync(`${ROOT}/**/pixi-version.json`); + const TUTORIALS_PATH = resolve(ROOT, 'src', 'tutorials'); + + // Read the directories in the tutorials directory + const tutorialDirectories = readdirSync(TUTORIALS_PATH, { withFileTypes: true }) + .filter((dirent) => dirent.isDirectory()) + .map((dirent) => dirent.name); // Perform the script on all the directories that they are in for (const versionFile of versionFiles) @@ -29,7 +36,19 @@ async function go() const TUTORIALS_MD_PATH = resolve(DOCS_PATH, 'tutorials'); const pixiVersion = require(versionFile); const VERSION = pixiVersion.version; - const TUTORIALS_JS_PATH = resolve(ROOT, 'src', 'tutorials', `v${VERSION}`); + const isPrerelease = prerelease(`v${VERSION}`); + const versionToCompare = isPrerelease ? `v${major(VERSION)}.${minor(VERSION)}.${patch(VERSION)}` : `v${VERSION}`; + + // Filter and sort the directories to find the best match + const bestMatch = tutorialDirectories + // eslint-disable-next-line no-loop-func + .filter((name) => valid(name) && lte(name, versionToCompare)) + .sort((a, b) => rcompare(a, b))[0]; + + console.log(`Generating tutorials for v${VERSION} using the ${bestMatch} source`); + + const TUTORIALS_JS_PATH = resolve(TUTORIALS_PATH, bestMatch); + const tutorialsData = require(`${TUTORIALS_JS_PATH}/tutorialsData.json`); const fileData = tutorialsData.map((tutorialKey) => diff --git a/scripts/update-global-version-configs.js b/scripts/update-global-version-configs.js index 5da7ea8cf..fdde68c64 100644 --- a/scripts/update-global-version-configs.js +++ b/scripts/update-global-version-configs.js @@ -71,6 +71,19 @@ recast.visit(ast, { ); } + versionProps.push( + recast.types.builders.property( + 'init', + recast.types.builders.identifier('banner'), + recast.types.builders.literal('none'), + ), + recast.types.builders.property( + 'init', + recast.types.builders.identifier('badge'), + recast.types.builders.literal(false), + ), + ); + return recast.types.builders.property( 'init', recast.types.builders.identifier(version.isCurrent ? 'current' : `'${version.version}'`), diff --git a/src/components/Homepage/ClosingSection/index.tsx b/src/components/Homepage/ClosingSection/index.tsx index a08ce5019..4364131fc 100644 --- a/src/components/Homepage/ClosingSection/index.tsx +++ b/src/components/Homepage/ClosingSection/index.tsx @@ -37,7 +37,7 @@ export default function ClosingSection(): JSX.Element anim="short-up-anim" style={animShortUp(0.3, 0.7)} label="Get Started" - link="/tutorial" + link="next/tutorials" outline={true} /> diff --git a/src/components/Homepage/HeroHeader/index.tsx b/src/components/Homepage/HeroHeader/index.tsx index 98874c69a..c21a56295 100644 --- a/src/components/Homepage/HeroHeader/index.tsx +++ b/src/components/Homepage/HeroHeader/index.tsx @@ -16,7 +16,7 @@ export default function HeroHeader(): JSX.Element
  - +
diff --git a/src/examples/index.ts b/src/examples/index.ts index ca4f2e393..a2b6c10c7 100644 --- a/src/examples/index.ts +++ b/src/examples/index.ts @@ -1,6 +1,7 @@ import type { OptionGroup } from '../components/Select'; -import v7x from './v7.3.2/index'; -import v8x from './v8.0.0-rc/index'; +import { lte, major, minor, patch, prerelease, rcompare, valid } from 'semver'; +import v7x from './v7.0.0/index'; +import v8x from './v8.0.0/index'; export type ExampleDataEntry = { name: string; @@ -23,18 +24,35 @@ export type ExamplesDataType = Record; // TODO: Use await import to dynamically load versioned content on demand instead? const versions: Record = { - '7.3.2': v7x, - '8.0.0-rc': v8x, + 'v7.0.0': v7x, + 'v8.0.0': v8x, }; +function getBestVersion(version: string) +{ + const isPrerelease = prerelease(version); + const versionToCompare = isPrerelease ? `${major(version)}.${minor(version)}.${patch(version)}` : version; + + // Get the keys of the versions object and filter them to find the best match + const bestMatch = Object.keys(versions) + .filter((name) => valid(name) && lte(name, versionToCompare)) + .sort((a, b) => rcompare(a, b))[0]; + + // Return the entries and options of the best match + return versions[bestMatch]; +} + export function getExampleEntry(version: string, pathString: string): ExampleSourceEntry | undefined { + const bestVersion = getBestVersion(version); const [directory, example] = pathString.split('.'); - return versions[version]?.entries[directory]?.[example]; + return bestVersion?.entries[directory]?.[example]; } export function getExampleOptions(version: string): OptionGroup[] { - return versions[version]?.options; + const bestVersion = getBestVersion(version); + + return bestVersion?.options; } diff --git a/src/examples/v7.3.2/advanced/collisionDetection.js b/src/examples/v7.0.0/advanced/collisionDetection.js similarity index 100% rename from src/examples/v7.3.2/advanced/collisionDetection.js rename to src/examples/v7.0.0/advanced/collisionDetection.js diff --git a/src/examples/v7.3.2/advanced/mouseTrail.js b/src/examples/v7.0.0/advanced/mouseTrail.js similarity index 100% rename from src/examples/v7.3.2/advanced/mouseTrail.js rename to src/examples/v7.0.0/advanced/mouseTrail.js diff --git a/src/examples/v7.3.2/advanced/scratchCard.js b/src/examples/v7.0.0/advanced/scratchCard.js similarity index 100% rename from src/examples/v7.3.2/advanced/scratchCard.js rename to src/examples/v7.0.0/advanced/scratchCard.js diff --git a/src/examples/v7.3.2/advanced/screenShot.js b/src/examples/v7.0.0/advanced/screenShot.js similarity index 100% rename from src/examples/v7.3.2/advanced/screenShot.js rename to src/examples/v7.0.0/advanced/screenShot.js diff --git a/src/examples/v7.3.2/advanced/slots.js b/src/examples/v7.0.0/advanced/slots.js similarity index 100% rename from src/examples/v7.3.2/advanced/slots.js rename to src/examples/v7.0.0/advanced/slots.js diff --git a/src/examples/v7.3.2/advanced/spinners.js b/src/examples/v7.0.0/advanced/spinners.js similarity index 100% rename from src/examples/v7.3.2/advanced/spinners.js rename to src/examples/v7.0.0/advanced/spinners.js diff --git a/src/examples/v7.3.2/advanced/starWarp.js b/src/examples/v7.0.0/advanced/starWarp.js similarity index 100% rename from src/examples/v7.3.2/advanced/starWarp.js rename to src/examples/v7.0.0/advanced/starWarp.js diff --git a/src/examples/v7.3.2/assets/async.js b/src/examples/v7.0.0/assets/async.js similarity index 100% rename from src/examples/v7.3.2/assets/async.js rename to src/examples/v7.0.0/assets/async.js diff --git a/src/examples/v7.3.2/assets/background.js b/src/examples/v7.0.0/assets/background.js similarity index 100% rename from src/examples/v7.3.2/assets/background.js rename to src/examples/v7.0.0/assets/background.js diff --git a/src/examples/v7.3.2/assets/bundle.js b/src/examples/v7.0.0/assets/bundle.js similarity index 100% rename from src/examples/v7.3.2/assets/bundle.js rename to src/examples/v7.0.0/assets/bundle.js diff --git a/src/examples/v7.3.2/assets/multiple.js b/src/examples/v7.0.0/assets/multiple.js similarity index 100% rename from src/examples/v7.3.2/assets/multiple.js rename to src/examples/v7.0.0/assets/multiple.js diff --git a/src/examples/v7.3.2/assets/promise.js b/src/examples/v7.0.0/assets/promise.js similarity index 100% rename from src/examples/v7.3.2/assets/promise.js rename to src/examples/v7.0.0/assets/promise.js diff --git a/src/examples/v7.3.2/basic/blendModes.js b/src/examples/v7.0.0/basic/blendModes.js similarity index 100% rename from src/examples/v7.3.2/basic/blendModes.js rename to src/examples/v7.0.0/basic/blendModes.js diff --git a/src/examples/v7.3.2/basic/cacheAsBitmap.js b/src/examples/v7.0.0/basic/cacheAsBitmap.js similarity index 100% rename from src/examples/v7.3.2/basic/cacheAsBitmap.js rename to src/examples/v7.0.0/basic/cacheAsBitmap.js diff --git a/src/examples/v7.3.2/basic/container.js b/src/examples/v7.0.0/basic/container.js similarity index 100% rename from src/examples/v7.3.2/basic/container.js rename to src/examples/v7.0.0/basic/container.js diff --git a/src/examples/v7.3.2/basic/particleContainer.js b/src/examples/v7.0.0/basic/particleContainer.js similarity index 100% rename from src/examples/v7.3.2/basic/particleContainer.js rename to src/examples/v7.0.0/basic/particleContainer.js diff --git a/src/examples/v7.3.2/basic/simplePlane.js b/src/examples/v7.0.0/basic/simplePlane.js similarity index 100% rename from src/examples/v7.3.2/basic/simplePlane.js rename to src/examples/v7.0.0/basic/simplePlane.js diff --git a/src/examples/v7.3.2/basic/tinting.js b/src/examples/v7.0.0/basic/tinting.js similarity index 100% rename from src/examples/v7.3.2/basic/tinting.js rename to src/examples/v7.0.0/basic/tinting.js diff --git a/src/examples/v7.3.2/basic/transparentBackground.js b/src/examples/v7.0.0/basic/transparentBackground.js similarity index 100% rename from src/examples/v7.3.2/basic/transparentBackground.js rename to src/examples/v7.0.0/basic/transparentBackground.js diff --git a/src/examples/v7.3.2/events/click.js b/src/examples/v7.0.0/events/click.js similarity index 100% rename from src/examples/v7.3.2/events/click.js rename to src/examples/v7.0.0/events/click.js diff --git a/src/examples/v7.3.2/events/customHitarea.js b/src/examples/v7.0.0/events/customHitarea.js similarity index 100% rename from src/examples/v7.3.2/events/customHitarea.js rename to src/examples/v7.0.0/events/customHitarea.js diff --git a/src/examples/v7.3.2/events/customMouseIcon.js b/src/examples/v7.0.0/events/customMouseIcon.js similarity index 100% rename from src/examples/v7.3.2/events/customMouseIcon.js rename to src/examples/v7.0.0/events/customMouseIcon.js diff --git a/src/examples/v7.3.2/events/dragging.js b/src/examples/v7.0.0/events/dragging.js similarity index 100% rename from src/examples/v7.3.2/events/dragging.js rename to src/examples/v7.0.0/events/dragging.js diff --git a/src/examples/v7.3.2/events/hitTestingWithSpatialHash.js b/src/examples/v7.0.0/events/hitTestingWithSpatialHash.js similarity index 100% rename from src/examples/v7.3.2/events/hitTestingWithSpatialHash.js rename to src/examples/v7.0.0/events/hitTestingWithSpatialHash.js diff --git a/src/examples/v7.3.2/events/interactivity.js b/src/examples/v7.0.0/events/interactivity.js similarity index 100% rename from src/examples/v7.3.2/events/interactivity.js rename to src/examples/v7.0.0/events/interactivity.js diff --git a/src/examples/v7.3.2/events/logger.js b/src/examples/v7.0.0/events/logger.js similarity index 100% rename from src/examples/v7.3.2/events/logger.js rename to src/examples/v7.0.0/events/logger.js diff --git a/src/examples/v7.3.2/events/nestedBoundaryWithProjection.js b/src/examples/v7.0.0/events/nestedBoundaryWithProjection.js similarity index 100% rename from src/examples/v7.3.2/events/nestedBoundaryWithProjection.js rename to src/examples/v7.0.0/events/nestedBoundaryWithProjection.js diff --git a/src/examples/v7.3.2/events/pointerTracker.js b/src/examples/v7.0.0/events/pointerTracker.js similarity index 100% rename from src/examples/v7.3.2/events/pointerTracker.js rename to src/examples/v7.0.0/events/pointerTracker.js diff --git a/src/examples/v7.3.2/events/slider.js b/src/examples/v7.0.0/events/slider.js similarity index 100% rename from src/examples/v7.3.2/events/slider.js rename to src/examples/v7.0.0/events/slider.js diff --git a/src/examples/v7.3.2/examplesData.json b/src/examples/v7.0.0/examplesData.json similarity index 100% rename from src/examples/v7.3.2/examplesData.json rename to src/examples/v7.0.0/examplesData.json diff --git a/src/examples/v7.3.2/filtersAdvanced/custom.js b/src/examples/v7.0.0/filtersAdvanced/custom.js similarity index 100% rename from src/examples/v7.3.2/filtersAdvanced/custom.js rename to src/examples/v7.0.0/filtersAdvanced/custom.js diff --git a/src/examples/v7.3.2/filtersAdvanced/mouseBlending.js b/src/examples/v7.0.0/filtersAdvanced/mouseBlending.js similarity index 100% rename from src/examples/v7.3.2/filtersAdvanced/mouseBlending.js rename to src/examples/v7.0.0/filtersAdvanced/mouseBlending.js diff --git a/src/examples/v7.3.2/filtersAdvanced/shaderToyFilterRenderTexture.js b/src/examples/v7.0.0/filtersAdvanced/shaderToyFilterRenderTexture.js similarity index 100% rename from src/examples/v7.3.2/filtersAdvanced/shaderToyFilterRenderTexture.js rename to src/examples/v7.0.0/filtersAdvanced/shaderToyFilterRenderTexture.js diff --git a/src/examples/v7.3.2/filtersBasic/blur.js b/src/examples/v7.0.0/filtersBasic/blur.js similarity index 100% rename from src/examples/v7.3.2/filtersBasic/blur.js rename to src/examples/v7.0.0/filtersBasic/blur.js diff --git a/src/examples/v7.3.2/filtersBasic/colorMatrix.js b/src/examples/v7.0.0/filtersBasic/colorMatrix.js similarity index 100% rename from src/examples/v7.3.2/filtersBasic/colorMatrix.js rename to src/examples/v7.0.0/filtersBasic/colorMatrix.js diff --git a/src/examples/v7.3.2/filtersBasic/displacementMapCrawlies.js b/src/examples/v7.0.0/filtersBasic/displacementMapCrawlies.js similarity index 100% rename from src/examples/v7.3.2/filtersBasic/displacementMapCrawlies.js rename to src/examples/v7.0.0/filtersBasic/displacementMapCrawlies.js diff --git a/src/examples/v7.3.2/filtersBasic/displacementMapFlag.js b/src/examples/v7.0.0/filtersBasic/displacementMapFlag.js similarity index 100% rename from src/examples/v7.3.2/filtersBasic/displacementMapFlag.js rename to src/examples/v7.0.0/filtersBasic/displacementMapFlag.js diff --git a/src/examples/v7.3.2/graphics/advanced.js b/src/examples/v7.0.0/graphics/advanced.js similarity index 100% rename from src/examples/v7.3.2/graphics/advanced.js rename to src/examples/v7.0.0/graphics/advanced.js diff --git a/src/examples/v7.3.2/graphics/dynamic.js b/src/examples/v7.0.0/graphics/dynamic.js similarity index 100% rename from src/examples/v7.3.2/graphics/dynamic.js rename to src/examples/v7.0.0/graphics/dynamic.js diff --git a/src/examples/v7.3.2/graphics/simple.js b/src/examples/v7.0.0/graphics/simple.js similarity index 100% rename from src/examples/v7.3.2/graphics/simple.js rename to src/examples/v7.0.0/graphics/simple.js diff --git a/src/examples/v7.3.2/index.ts b/src/examples/v7.0.0/index.ts similarity index 100% rename from src/examples/v7.3.2/index.ts rename to src/examples/v7.0.0/index.ts diff --git a/src/examples/v7.3.2/masks/filter.js b/src/examples/v7.0.0/masks/filter.js similarity index 100% rename from src/examples/v7.3.2/masks/filter.js rename to src/examples/v7.0.0/masks/filter.js diff --git a/src/examples/v7.3.2/masks/graphics.js b/src/examples/v7.0.0/masks/graphics.js similarity index 100% rename from src/examples/v7.3.2/masks/graphics.js rename to src/examples/v7.0.0/masks/graphics.js diff --git a/src/examples/v7.3.2/masks/sprite.js b/src/examples/v7.0.0/masks/sprite.js similarity index 100% rename from src/examples/v7.3.2/masks/sprite.js rename to src/examples/v7.0.0/masks/sprite.js diff --git a/src/examples/v7.3.2/meshAndShaders/instancedGeometry.js b/src/examples/v7.0.0/meshAndShaders/instancedGeometry.js similarity index 100% rename from src/examples/v7.3.2/meshAndShaders/instancedGeometry.js rename to src/examples/v7.0.0/meshAndShaders/instancedGeometry.js diff --git a/src/examples/v7.3.2/meshAndShaders/interleavingGeometry.js b/src/examples/v7.0.0/meshAndShaders/interleavingGeometry.js similarity index 100% rename from src/examples/v7.3.2/meshAndShaders/interleavingGeometry.js rename to src/examples/v7.0.0/meshAndShaders/interleavingGeometry.js diff --git a/src/examples/v7.3.2/meshAndShaders/mergingGeometry.js b/src/examples/v7.0.0/meshAndShaders/mergingGeometry.js similarity index 100% rename from src/examples/v7.3.2/meshAndShaders/mergingGeometry.js rename to src/examples/v7.0.0/meshAndShaders/mergingGeometry.js diff --git a/src/examples/v7.3.2/meshAndShaders/multiPassShaderGeneratedMesh.js b/src/examples/v7.0.0/meshAndShaders/multiPassShaderGeneratedMesh.js similarity index 100% rename from src/examples/v7.3.2/meshAndShaders/multiPassShaderGeneratedMesh.js rename to src/examples/v7.0.0/meshAndShaders/multiPassShaderGeneratedMesh.js diff --git a/src/examples/v7.3.2/meshAndShaders/shaderToyMesh.js b/src/examples/v7.0.0/meshAndShaders/shaderToyMesh.js similarity index 100% rename from src/examples/v7.3.2/meshAndShaders/shaderToyMesh.js rename to src/examples/v7.0.0/meshAndShaders/shaderToyMesh.js diff --git a/src/examples/v7.3.2/meshAndShaders/sharedShader.js b/src/examples/v7.0.0/meshAndShaders/sharedShader.js similarity index 100% rename from src/examples/v7.3.2/meshAndShaders/sharedShader.js rename to src/examples/v7.0.0/meshAndShaders/sharedShader.js diff --git a/src/examples/v7.3.2/meshAndShaders/sharingGeometry.js b/src/examples/v7.0.0/meshAndShaders/sharingGeometry.js similarity index 100% rename from src/examples/v7.3.2/meshAndShaders/sharingGeometry.js rename to src/examples/v7.0.0/meshAndShaders/sharingGeometry.js diff --git a/src/examples/v7.3.2/meshAndShaders/texturedMeshAdvanced.js b/src/examples/v7.0.0/meshAndShaders/texturedMeshAdvanced.js similarity index 100% rename from src/examples/v7.3.2/meshAndShaders/texturedMeshAdvanced.js rename to src/examples/v7.0.0/meshAndShaders/texturedMeshAdvanced.js diff --git a/src/examples/v7.3.2/meshAndShaders/texturedMeshBasic.js b/src/examples/v7.0.0/meshAndShaders/texturedMeshBasic.js similarity index 100% rename from src/examples/v7.3.2/meshAndShaders/texturedMeshBasic.js rename to src/examples/v7.0.0/meshAndShaders/texturedMeshBasic.js diff --git a/src/examples/v7.3.2/meshAndShaders/triangle.js b/src/examples/v7.0.0/meshAndShaders/triangle.js similarity index 100% rename from src/examples/v7.3.2/meshAndShaders/triangle.js rename to src/examples/v7.0.0/meshAndShaders/triangle.js diff --git a/src/examples/v7.3.2/meshAndShaders/triangleColor.js b/src/examples/v7.0.0/meshAndShaders/triangleColor.js similarity index 100% rename from src/examples/v7.3.2/meshAndShaders/triangleColor.js rename to src/examples/v7.0.0/meshAndShaders/triangleColor.js diff --git a/src/examples/v7.3.2/meshAndShaders/triangleTextured.js b/src/examples/v7.0.0/meshAndShaders/triangleTextured.js similarity index 100% rename from src/examples/v7.3.2/meshAndShaders/triangleTextured.js rename to src/examples/v7.0.0/meshAndShaders/triangleTextured.js diff --git a/src/examples/v7.3.2/meshAndShaders/uniforms.js b/src/examples/v7.0.0/meshAndShaders/uniforms.js similarity index 100% rename from src/examples/v7.3.2/meshAndShaders/uniforms.js rename to src/examples/v7.0.0/meshAndShaders/uniforms.js diff --git a/src/examples/v7.3.2/offscreenCanvas/basic.js b/src/examples/v7.0.0/offscreenCanvas/basic.js similarity index 100% rename from src/examples/v7.3.2/offscreenCanvas/basic.js rename to src/examples/v7.0.0/offscreenCanvas/basic.js diff --git a/src/examples/v7.3.2/offscreenCanvas/webWorker.js b/src/examples/v7.0.0/offscreenCanvas/webWorker.js similarity index 100% rename from src/examples/v7.3.2/offscreenCanvas/webWorker.js rename to src/examples/v7.0.0/offscreenCanvas/webWorker.js diff --git a/src/examples/v7.3.2/sprite/animatedSpriteAnimationSpeed.js b/src/examples/v7.0.0/sprite/animatedSpriteAnimationSpeed.js similarity index 100% rename from src/examples/v7.3.2/sprite/animatedSpriteAnimationSpeed.js rename to src/examples/v7.0.0/sprite/animatedSpriteAnimationSpeed.js diff --git a/src/examples/v7.3.2/sprite/animatedSpriteExplosion.js b/src/examples/v7.0.0/sprite/animatedSpriteExplosion.js similarity index 100% rename from src/examples/v7.3.2/sprite/animatedSpriteExplosion.js rename to src/examples/v7.0.0/sprite/animatedSpriteExplosion.js diff --git a/src/examples/v7.3.2/sprite/animatedSpriteJet.js b/src/examples/v7.0.0/sprite/animatedSpriteJet.js similarity index 100% rename from src/examples/v7.3.2/sprite/animatedSpriteJet.js rename to src/examples/v7.0.0/sprite/animatedSpriteJet.js diff --git a/src/examples/v7.3.2/sprite/basic.js b/src/examples/v7.0.0/sprite/basic.js similarity index 100% rename from src/examples/v7.3.2/sprite/basic.js rename to src/examples/v7.0.0/sprite/basic.js diff --git a/src/examples/v7.3.2/sprite/textureSwap.js b/src/examples/v7.0.0/sprite/textureSwap.js similarity index 100% rename from src/examples/v7.3.2/sprite/textureSwap.js rename to src/examples/v7.0.0/sprite/textureSwap.js diff --git a/src/examples/v7.3.2/sprite/tilingSprite.js b/src/examples/v7.0.0/sprite/tilingSprite.js similarity index 100% rename from src/examples/v7.3.2/sprite/tilingSprite.js rename to src/examples/v7.0.0/sprite/tilingSprite.js diff --git a/src/examples/v7.3.2/sprite/video.js b/src/examples/v7.0.0/sprite/video.js similarity index 100% rename from src/examples/v7.3.2/sprite/video.js rename to src/examples/v7.0.0/sprite/video.js diff --git a/src/examples/v7.3.2/text/bitmapText.js b/src/examples/v7.0.0/text/bitmapText.js similarity index 100% rename from src/examples/v7.3.2/text/bitmapText.js rename to src/examples/v7.0.0/text/bitmapText.js diff --git a/src/examples/v7.3.2/text/fromFont.js b/src/examples/v7.0.0/text/fromFont.js similarity index 100% rename from src/examples/v7.3.2/text/fromFont.js rename to src/examples/v7.0.0/text/fromFont.js diff --git a/src/examples/v7.3.2/text/pixiText.js b/src/examples/v7.0.0/text/pixiText.js similarity index 100% rename from src/examples/v7.3.2/text/pixiText.js rename to src/examples/v7.0.0/text/pixiText.js diff --git a/src/examples/v7.3.2/text/webFont.js b/src/examples/v7.0.0/text/webFont.js similarity index 100% rename from src/examples/v7.3.2/text/webFont.js rename to src/examples/v7.0.0/text/webFont.js diff --git a/src/examples/v7.3.2/textures/gradientBasic.js b/src/examples/v7.0.0/textures/gradientBasic.js similarity index 100% rename from src/examples/v7.3.2/textures/gradientBasic.js rename to src/examples/v7.0.0/textures/gradientBasic.js diff --git a/src/examples/v7.3.2/textures/gradientResource.js b/src/examples/v7.0.0/textures/gradientResource.js similarity index 100% rename from src/examples/v7.3.2/textures/gradientResource.js rename to src/examples/v7.0.0/textures/gradientResource.js diff --git a/src/examples/v7.3.2/textures/renderTextureAdvanced.js b/src/examples/v7.0.0/textures/renderTextureAdvanced.js similarity index 100% rename from src/examples/v7.3.2/textures/renderTextureAdvanced.js rename to src/examples/v7.0.0/textures/renderTextureAdvanced.js diff --git a/src/examples/v7.3.2/textures/renderTextureBasic.js b/src/examples/v7.0.0/textures/renderTextureBasic.js similarity index 100% rename from src/examples/v7.3.2/textures/renderTextureBasic.js rename to src/examples/v7.0.0/textures/renderTextureBasic.js diff --git a/src/examples/v7.3.2/textures/textureRotate.js b/src/examples/v7.0.0/textures/textureRotate.js similarity index 100% rename from src/examples/v7.3.2/textures/textureRotate.js rename to src/examples/v7.0.0/textures/textureRotate.js diff --git a/src/examples/v8.0.0-rc/advanced/collisionDetection.js b/src/examples/v8.0.0-rc/advanced/collisionDetection.js deleted file mode 100644 index 454a7ca6c..000000000 --- a/src/examples/v8.0.0-rc/advanced/collisionDetection.js +++ /dev/null @@ -1,179 +0,0 @@ -import * as PIXI from 'pixi.js'; - -// Based somewhat on this article by Spicy Yoghurt -// URL for further reading: https://spicyyoghurt.com/tutorials/html5-javascript-game-development/collision-detection-physics -const app = new PIXI.Application({ background: '#111', resizeTo: window }); - -document.body.appendChild(app.view); - -// Options for how objects interact -// How fast the red square moves -const movementSpeed = 0.05; - -// Strength of the impulse push between two objects -const impulsePower = 5; - -// Test For Hit -// A basic AABB check between two different squares -function testForAABB(object1, object2) -{ - const bounds1 = object1.getBounds(); - const bounds2 = object2.getBounds(); - - return ( - bounds1.x < bounds2.x + bounds2.width - && bounds1.x + bounds1.width > bounds2.x - && bounds1.y < bounds2.y + bounds2.height - && bounds1.y + bounds1.height > bounds2.y - ); -} - -// Calculates the results of a collision, allowing us to give an impulse that -// shoves objects apart -function collisionResponse(object1, object2) -{ - if (!object1 || !object2) - { - return new PIXI.Point(0); - } - - const vCollision = new PIXI.Point(object2.x - object1.x, object2.y - object1.y); - - const distance = Math.sqrt( - (object2.x - object1.x) * (object2.x - object1.x) + (object2.y - object1.y) * (object2.y - object1.y), - ); - - const vCollisionNorm = new PIXI.Point(vCollision.x / distance, vCollision.y / distance); - - const vRelativeVelocity = new PIXI.Point( - object1.acceleration.x - object2.acceleration.x, - object1.acceleration.y - object2.acceleration.y, - ); - - const speed = vRelativeVelocity.x * vCollisionNorm.x + vRelativeVelocity.y * vCollisionNorm.y; - - const impulse = (impulsePower * speed) / (object1.mass + object2.mass); - - return new PIXI.Point(impulse * vCollisionNorm.x, impulse * vCollisionNorm.y); -} - -// Calculate the distance between two given points -function distanceBetweenTwoPoints(p1, p2) -{ - const a = p1.x - p2.x; - const b = p1.y - p2.y; - - return Math.hypot(a, b); -} - -// The green square we will knock about -const greenSquare = new PIXI.Sprite(PIXI.Texture.WHITE); - -greenSquare.position.set((app.screen.width - 100) / 2, (app.screen.height - 100) / 2); -greenSquare.width = 100; -greenSquare.height = 100; -greenSquare.tint = 0x00ff00; -greenSquare.acceleration = new PIXI.Point(0); -greenSquare.mass = 3; - -// The square you move around -const redSquare = new PIXI.Sprite(PIXI.Texture.WHITE); - -redSquare.position.set(0, 0); -redSquare.width = 100; -redSquare.height = 100; -redSquare.tint = 0xff0000; -redSquare.acceleration = new PIXI.Point(0); -redSquare.mass = 1; - -const mouseCoords = { x: 0, y: 0 }; - -app.stage.eventMode = 'static'; -app.stage.hitArea = app.screen; -app.stage.on('mousemove', (event) => -{ - mouseCoords.x = event.global.x; - mouseCoords.y = event.global.y; -}); - -// Listen for animate update -app.ticker.add((delta) => -{ - // Applied deacceleration for both squares, done by reducing the - // acceleration by 0.01% of the acceleration every loop - redSquare.acceleration.set(redSquare.acceleration.x * 0.99, redSquare.acceleration.y * 0.99); - greenSquare.acceleration.set(greenSquare.acceleration.x * 0.99, greenSquare.acceleration.y * 0.99); - - // Check whether the green square ever moves off the screen - // If so, reverse acceleration in that direction - if (greenSquare.x < 0 || greenSquare.x > app.screen.width - 100) - { - greenSquare.acceleration.x = -greenSquare.acceleration.x; - } - - if (greenSquare.y < 0 || greenSquare.y > app.screen.height - 100) - { - greenSquare.acceleration.y = -greenSquare.acceleration.y; - } - - // If the green square pops out of the cordon, it pops back into the - // middle - if ( - greenSquare.x < -30 - || greenSquare.x > app.screen.width + 30 - || greenSquare.y < -30 - || greenSquare.y > app.screen.height + 30 - ) - { - greenSquare.position.set((app.screen.width - 100) / 2, (app.screen.height - 100) / 2); - } - - // If the mouse is off screen, then don't update any further - if (app.screen.width > mouseCoords.x || mouseCoords.x > 0 || app.screen.height > mouseCoords.y || mouseCoords.y > 0) - { - // Get the red square's center point - const redSquareCenterPosition = new PIXI.Point( - redSquare.x + redSquare.width * 0.5, - redSquare.y + redSquare.height * 0.5, - ); - - // Calculate the direction vector between the mouse pointer and - // the red square - const toMouseDirection = new PIXI.Point( - mouseCoords.x - redSquareCenterPosition.x, - mouseCoords.y - redSquareCenterPosition.y, - ); - - // Use the above to figure out the angle that direction has - const angleToMouse = Math.atan2(toMouseDirection.y, toMouseDirection.x); - - // Figure out the speed the square should be travelling by, as a - // function of how far away from the mouse pointer the red square is - const distMouseRedSquare = distanceBetweenTwoPoints(mouseCoords, redSquareCenterPosition); - const redSpeed = distMouseRedSquare * movementSpeed; - - // Calculate the acceleration of the red square - redSquare.acceleration.set(Math.cos(angleToMouse) * redSpeed, Math.sin(angleToMouse) * redSpeed); - } - - // If the two squares are colliding - if (testForAABB(greenSquare, redSquare)) - { - // Calculate the changes in acceleration that should be made between - // each square as a result of the collision - const collisionPush = collisionResponse(greenSquare, redSquare); - // Set the changes in acceleration for both squares - - redSquare.acceleration.set(collisionPush.x * greenSquare.mass, collisionPush.y * greenSquare.mass); - greenSquare.acceleration.set(-(collisionPush.x * redSquare.mass), -(collisionPush.y * redSquare.mass)); - } - - greenSquare.x += greenSquare.acceleration.x * delta; - greenSquare.y += greenSquare.acceleration.y * delta; - - redSquare.x += redSquare.acceleration.x * delta; - redSquare.y += redSquare.acceleration.y * delta; -}); - -// Add to stage -app.stage.addChild(redSquare, greenSquare); diff --git a/src/examples/v8.0.0-rc/advanced/mouseTrail.js b/src/examples/v8.0.0-rc/advanced/mouseTrail.js deleted file mode 100644 index e0457e944..000000000 --- a/src/examples/v8.0.0-rc/advanced/mouseTrail.js +++ /dev/null @@ -1,101 +0,0 @@ -import * as PIXI from 'pixi.js'; - -const app = new PIXI.Application({ background: '#1099bb', resizeTo: window }); - -document.body.appendChild(app.view); - -// Get the texture for rope. -const trailTexture = PIXI.Texture.from('https://pixijs.com/assets/trail.png'); -const historyX = []; -const historyY = []; -// historySize determines how long the trail will be. -const historySize = 20; -// ropeSize determines how smooth the trail will be. -const ropeSize = 100; -const points = []; - -// Create history array. -for (let i = 0; i < historySize; i++) -{ - historyX.push(0); - historyY.push(0); -} -// Create rope points. -for (let i = 0; i < ropeSize; i++) -{ - points.push(new PIXI.Point(0, 0)); -} - -// Create the rope -const rope = new PIXI.SimpleRope(trailTexture, points); - -// Set the blendmode -rope.blendmode = PIXI.BLEND_MODES.ADD; - -app.stage.addChild(rope); - -let mouseposition = null; - -app.stage.eventMode = 'static'; -app.stage.hitArea = app.screen; -app.stage.on('mousemove', (event) => -{ - mouseposition = mouseposition || { x: 0, y: 0 }; - mouseposition.x = event.global.x; - mouseposition.y = event.global.y; -}); - -// Listen for animate update -app.ticker.add(() => -{ - if (!mouseposition) return; - - // Update the mouse values to history - historyX.pop(); - historyX.unshift(mouseposition.x); - historyY.pop(); - historyY.unshift(mouseposition.y); - // Update the points to correspond with history. - for (let i = 0; i < ropeSize; i++) - { - const p = points[i]; - - // Smooth the curve with cubic interpolation to prevent sharp edges. - const ix = cubicInterpolation(historyX, (i / ropeSize) * historySize); - const iy = cubicInterpolation(historyY, (i / ropeSize) * historySize); - - p.x = ix; - p.y = iy; - } -}); - -/** - * Cubic interpolation based on https://github.com/osuushi/Smooth.js - */ -function clipInput(k, arr) -{ - if (k < 0) k = 0; - if (k > arr.length - 1) k = arr.length - 1; - - return arr[k]; -} - -function getTangent(k, factor, array) -{ - return (factor * (clipInput(k + 1, array) - clipInput(k - 1, array))) / 2; -} - -function cubicInterpolation(array, t, tangentFactor) -{ - if (tangentFactor === null) tangentFactor = 1; - - const k = Math.floor(t); - const m = [getTangent(k, tangentFactor, array), getTangent(k + 1, tangentFactor, array)]; - const p = [clipInput(k, array), clipInput(k + 1, array)]; - - t -= k; - const t2 = t * t; - const t3 = t * t2; - - return (2 * t3 - 3 * t2 + 1) * p[0] + (t3 - 2 * t2 + t) * m[0] + (-2 * t3 + 3 * t2) * p[1] + (t3 - t2) * m[1]; -} diff --git a/src/examples/v8.0.0-rc/advanced/scratchCard.js b/src/examples/v8.0.0-rc/advanced/scratchCard.js deleted file mode 100644 index b5e2b0274..000000000 --- a/src/examples/v8.0.0-rc/advanced/scratchCard.js +++ /dev/null @@ -1,83 +0,0 @@ -import * as PIXI from 'pixi.js'; - -const app = new PIXI.Application({ resizeTo: window }); - -document.body.appendChild(app.view); - -// prepare circle texture, that will be our brush -const brush = new PIXI.Graphics().beginFill(0xffffff).drawCircle(0, 0, 50); - -// Create a line that will interpolate the drawn points -const line = new PIXI.Graphics(); - -PIXI.Assets.add('t1', 'https://pixijs.com/assets/bg_grass.jpg'); -PIXI.Assets.add('t2', 'https://pixijs.com/assets/bg_rotate.jpg'); -PIXI.Assets.load(['t1', 't2']).then(setup); - -function setup() -{ - const { width, height } = app.screen; - const stageSize = { width, height }; - - const background = Object.assign(PIXI.Sprite.from('t1'), stageSize); - const imageToReveal = Object.assign(PIXI.Sprite.from('t2'), stageSize); - const renderTexture = PIXI.RenderTexture.create(stageSize); - const renderTextureSprite = new PIXI.Sprite(renderTexture); - - imageToReveal.mask = renderTextureSprite; - - app.stage.addChild(background, imageToReveal, renderTextureSprite); - - app.stage.eventMode = 'static'; - app.stage.hitArea = app.screen; - app.stage - .on('pointerdown', pointerDown) - .on('pointerup', pointerUp) - .on('pointerupoutside', pointerUp) - .on('pointermove', pointerMove); - - let dragging = false; - let lastDrawnPoint = null; - - function pointerMove({ global: { x, y } }) - { - if (dragging) - { - brush.position.set(x, y); - app.renderer.render(brush, { - renderTexture, - clear: false, - skipUpdateTransform: false, - }); - // Smooth out the drawing a little bit to make it look nicer - // this connects the previous drawn point to the current one - // using a line - if (lastDrawnPoint) - { - line.clear() - .lineStyle({ width: 100, color: 0xffffff }) - .moveTo(lastDrawnPoint.x, lastDrawnPoint.y) - .lineTo(x, y); - app.renderer.render(line, { - renderTexture, - clear: false, - skipUpdateTransform: false, - }); - } - lastDrawnPoint = lastDrawnPoint || new PIXI.Point(); - lastDrawnPoint.set(x, y); - } - } - - function pointerDown(event) - { - dragging = true; - pointerMove(event); - } - - function pointerUp(event) - { - dragging = false; - lastDrawnPoint = null; - } -} diff --git a/src/examples/v8.0.0-rc/advanced/screenShot.js b/src/examples/v8.0.0-rc/advanced/screenShot.js deleted file mode 100644 index 06cbd30cc..000000000 --- a/src/examples/v8.0.0-rc/advanced/screenShot.js +++ /dev/null @@ -1,58 +0,0 @@ -import * as PIXI from 'pixi.js'; - -const app = new PIXI.Application({ backgroundColor: '#111', resizeTo: window }); - -document.body.appendChild(app.view); - -const texture = PIXI.Texture.from('https://pixijs.com/assets/bunny.png'); -const bunnyContainer = new PIXI.Container(); - -async function takeScreenshot() -{ - app.stop(); - const url = await app.renderer.extract.base64(bunnyContainer); - const a = document.createElement('a'); - - document.body.append(a); - a.download = 'screenshot'; - a.href = url; - a.click(); - a.remove(); - app.start(); -} - -app.stage.eventMode = 'static'; -app.stage.hitArea = app.screen; -app.stage.on('pointerdown', takeScreenshot); - -for (let i = 0; i < 25; i++) -{ - const bunny = new PIXI.Sprite(texture); - - bunny.anchor.set(0.5); - bunny.x = (i % 5) * 40; - bunny.y = Math.floor(i / 5) * 40; - bunnyContainer.addChild(bunny); -} - -bunnyContainer.x = 400; -bunnyContainer.y = 300; -bunnyContainer.pivot.x = bunnyContainer.width / 2; -bunnyContainer.pivot.y = bunnyContainer.height / 2; - -app.ticker.add((delta) => -{ - bunnyContainer.rotation += 0.01 * delta; -}); - -const style = new PIXI.TextStyle({ - fontFamily: 'Roboto', - fill: '#999', -}); - -const screenshotText = new PIXI.Text('Click To Take Screenshot', style); - -screenshotText.x = Math.round((app.screen.width - screenshotText.width) / 2); -screenshotText.y = Math.round(screenshotText.height / 2); - -app.stage.addChild(screenshotText, bunnyContainer); diff --git a/src/examples/v8.0.0-rc/advanced/spinners.js b/src/examples/v8.0.0-rc/advanced/spinners.js deleted file mode 100644 index 3503c3719..000000000 --- a/src/examples/v8.0.0-rc/advanced/spinners.js +++ /dev/null @@ -1,427 +0,0 @@ -import * as PIXI from 'pixi.js'; - -const app = new PIXI.Application({ background: '#1099bb', resizeTo: window }); - -document.body.appendChild(app.view); - -/* --------------------------------------- - Spinner 1. Square with radial completion. - -------------------------------------- */ -const generateSpinner1 = (position) => -{ - const container = new PIXI.Container(); - - container.position = position; - app.stage.addChild(container); - - const base = PIXI.Sprite.from('https://pixijs.com/assets/bg_scene_rotate.jpg'); - const size = 100; - - base.width = size; - base.height = size; - - const bottom = PIXI.Sprite.from('https://pixijs.com/assets/bg_rotate.jpg'); - - bottom.width = size; - bottom.height = size; - - const mask = new PIXI.Graphics(); - - mask.position.set(size / 2, size / 2); - base.mask = mask; - window.mask = mask; - - container.addChild(bottom); - container.addChild(base); - container.addChild(mask); - - let phase = 0; - - return (delta) => - { - // Update phase - phase += delta / 60; - phase %= Math.PI * 2; - - // Calculate target point. - const x = Math.cos(phase - Math.PI / 2) * size; - const y = Math.sin(phase - Math.PI / 2) * size; - - const segments = [ - [-size / 2, -size / 2, size / 2, -size / 2], // top segment - [size / 2, -size / 2, size / 2, size / 2], // right - [-size / 2, size / 2, size / 2, size / 2], // bottom - [-size / 2, -size / 2, -size / 2, size / 2], // left - ]; - - // Find the intersecting segment. - let intersection = null; - let winding = 0; - - for (let i = 0; i < segments.length; i++) - { - const segment = segments[i]; - const hit = intersect(0, 0, x, y, segment[0], segment[1], segment[2], segment[3]); - - if (hit) - { - intersection = hit; - if (i === 0) winding = hit.x > 0 ? 0 : 4; - else winding = i; - break; - } - } - - const corners = [ - size / 2, - -size / 2, // Top right - size / 2, - size / 2, // Bottom right - -size / 2, - size / 2, // Bottom left - -size / 2, - -size / 2, // Top left, - 0, - -size / 2, // End point - ]; - - // Redraw mask - mask.clear(); - mask.lineStyle(2, 0xff0000, 1); - mask.beginFill(0xff0000, 1); - mask.moveTo(0, -size / 2); - mask.lineTo(0, 0); - - mask.lineTo(intersection.x, intersection.y); - - // fill the corners - for (let i = winding; i < corners.length / 2; i++) - { - mask.lineTo(corners[i * 2], corners[i * 2 + 1]); - } - mask.endFill(); - }; -}; - -/* ----------------------- - Spinner 2. Scaling balls. - ---------------------- */ -const generateSpinner2 = (position) => -{ - const container = new PIXI.Container(); - - container.position = position; - app.stage.addChild(container); - - const size = 100; - const ballAmount = 7; - const balls = []; - - for (let i = 0; i < ballAmount; i++) - { - const ball = PIXI.Sprite.from('https://pixijs.com/assets/circle.png'); - - ball.anchor.set(0.5); - container.addChild(ball); - ball.position.set( - size / 2 + (Math.cos((i / ballAmount) * Math.PI * 2) * size) / 3, - size / 2 + (Math.sin((i / ballAmount) * Math.PI * 2) * size) / 3, - ); - balls.push(ball); - } - - let phase = 0; - - return (delta) => - { - // Update phase - phase += delta / 60; - phase %= Math.PI * 2; - - // Update ball scales - balls.forEach((b, i) => - { - const sin = Math.sin((i / ballAmount) * Math.PI - phase); - // Multiply sin with itself to get more steeper edge. - - b.scale.set(Math.abs(sin * sin * sin * 0.5) + 0.5); - }); - }; -}; - -/* --------------------- - Spinner 3. Radial mask. - -------------------- */ -const generateSpinner3 = (position) => -{ - const container = new PIXI.Container(); - - container.position = position; - app.stage.addChild(container); - - const base = PIXI.Sprite.from('https://pixijs.com/assets/bg_scene_rotate.jpg'); - const size = 100; - - base.width = size; - base.height = size; - - const mask = new PIXI.Graphics(); - - mask.position.set(size / 2, size / 2); - base.mask = mask; - window.mask = mask; - - container.addChild(base); - container.addChild(mask); - - let phase = 0; - - return (delta) => - { - // Update phase - phase += delta / 60; - phase %= Math.PI * 2; - - const angleStart = 0 - Math.PI / 2; - const angle = phase + angleStart; - const radius = 50; - - const x1 = Math.cos(angleStart) * radius; - const y1 = Math.sin(angleStart) * radius; - - // Redraw mask - mask.clear(); - mask.lineStyle(2, 0xff0000, 1); - mask.beginFill(0xff0000, 1); - mask.moveTo(0, 0); - mask.lineTo(x1, y1); - mask.arc(0, 0, radius, angleStart, angle, false); - mask.lineTo(0, 0); - mask.endFill(); - }; -}; - -/* --------------------------------- - Spinner 4. Rounded rectangle edges. - ------------------------------- */ -const generateSpinner4 = (position) => -{ - const container = new PIXI.Container(); - - container.position = position; - app.stage.addChild(container); - - const size = 100; - const arcRadius = 15; - - const base = PIXI.Sprite.from('https://pixijs.com/assets/bg_scene_rotate.jpg'); - - base.width = size; - base.height = size; - - // For better performance having assets prerounded would be better than masking. - const roundingMask = new PIXI.Graphics(); - - roundingMask.beginFill(0, 1); - roundingMask.lineStyle(1, 0xff0000, 1); - roundingMask.drawRoundedRect(0, 0, size, size, arcRadius); - roundingMask.endFill(); - base.mask = roundingMask; - - // The edge could be replaced with image as well. - const lineSize = 5; - const edge = new PIXI.Graphics(); - - edge.lineStyle(lineSize, 0xff0000, 1); - edge.drawRoundedRect(0, 0, size, size, arcRadius); - edge.endFill(); - - // Mask in this example works basically the same way as in example 1. - // Except it is reversed and calculates the mask in straight lines in edges. - const mask = new PIXI.Graphics(); - - mask.position.set(size / 2, size / 2); - edge.mask = mask; - - container.addChild(base); - container.addChild(roundingMask); - container.addChild(edge); - container.addChild(mask); - - let phase = 0; - - return (delta) => - { - // Update phase - phase += delta / 160; - phase %= Math.PI * 2; - - // Calculate target point. - const x = Math.cos(phase - Math.PI / 2) * size; - const y = Math.sin(phase - Math.PI / 2) * size; - // Line segments - const segments = [ - [-size / 2 + lineSize, -size / 2 + lineSize, size / 2 - lineSize, -size / 2 + lineSize], // top segment - [size / 2 - lineSize, -size / 2 + lineSize, size / 2 - lineSize, size / 2 - lineSize], // right - [-size / 2 + lineSize, size / 2 - lineSize, size / 2 - lineSize, size / 2 - lineSize], // bottom - [-size / 2 + lineSize, -size / 2 + lineSize, -size / 2 + lineSize, size / 2 - lineSize], // left - ]; - // To which dir should mask continue at each segment - let outDir = [ - [0, -1], - [1, 0], - [0, 1], - [-1, 0], - ]; - - // Find the intersecting segment. - let intersection = null; - let winding = 0; - // What direction should the line continue after hit has been found before hitting the line size - - for (let i = 0; i < segments.length; i++) - { - const segment = segments[i]; - const hit = intersect(0, 0, x, y, segment[0], segment[1], segment[2], segment[3]); - - if (hit) - { - intersection = hit; - if (i === 0) winding = hit.x < 0 ? 0 : 4; - else winding = 4 - i; - outDir = outDir[i]; - break; - } - } - - const corners = [ - -size / 2 - lineSize, - -size / 2 - lineSize, // Top left, - -size / 2 - lineSize, - size / 2 + lineSize, // Bottom left - size / 2 + lineSize, - size / 2 + lineSize, // Bottom right - size / 2 + lineSize, - -size / 2 - lineSize, // Top right - ]; - - // Redraw mask - mask.clear(); - mask.lineStyle(2, 0x00ff00, 1); - mask.beginFill(0xff0000, 1); - - mask.moveTo(0, 0); - mask.moveTo(0, -size / 2 - lineSize); - - // fill the corners - for (let i = 0; i < winding; i++) - { - mask.lineTo(corners[i * 2], corners[i * 2 + 1]); - } - - mask.lineTo(intersection.x + outDir[0] * lineSize * 2, intersection.y + outDir[1] * lineSize * 2); - mask.lineTo(intersection.x, intersection.y); - mask.lineTo(0, 0); - - mask.endFill(); - }; -}; - -/* --------------------- - Spinner 5. Rounded rectangle fixed length spinner by jonlepage - -------------------- */ -const generateSpinner5 = (position) => -{ - const container = new PIXI.Container(); - - container.position = position; - app.stage.addChild(container); - - const halfCircle = new PIXI.Graphics(); - - halfCircle.beginFill(0xff0000); - halfCircle.lineStyle(2, 0xffffff); - halfCircle.arc(0, 0, 100, 0, Math.PI); - halfCircle.endFill(); - halfCircle.position.set(50, 50); - - const rectangle = new PIXI.Graphics(); - - rectangle.lineStyle(2, 0xffffff, 1); - rectangle.drawRoundedRect(0, 0, 100, 100, 16); - rectangle.endFill(); - rectangle.mask = halfCircle; - - container.addChild(rectangle); - container.addChild(halfCircle); - - let phase = 0; - - return (delta) => - { - // Update phase - phase += delta / 6; - phase %= Math.PI * 2; - - halfCircle.rotation = phase; - }; -}; - -const onTick = [ - generateSpinner1(new PIXI.Point(50, 50)), - generateSpinner2(new PIXI.Point(160, 50)), - generateSpinner3(new PIXI.Point(270, 50)), - generateSpinner4(new PIXI.Point(380, 50)), - generateSpinner5(new PIXI.Point(490, 50)), -]; - -// Listen for animate update -app.ticker.add((delta) => -{ - // Call tick handling for each spinner. - onTick.forEach((cb) => - { - cb(delta); - }); -}); - -/** - * Helper functions - - line intercept math by Paul Bourke http://paulbourke.net/geometry/pointlineplane/ - Determine the intersection point of two line segments - Return FALSE if the lines don't intersect - - Code modified from original to match pixi examples linting rules. -*/ -function intersect(x1, y1, x2, y2, x3, y3, x4, y4) -{ - // Check if none of the lines are of length 0 - if ((x1 === x2 && y1 === y2) || (x3 === x4 && y3 === y4)) - { - return false; - } - - const denominator = (y4 - y3) * (x2 - x1) - (x4 - x3) * (y2 - y1); - - // Lines are parallel - if (denominator === 0) - { - return false; - } - - const ua = ((x4 - x3) * (y1 - y3) - (y4 - y3) * (x1 - x3)) / denominator; - const ub = ((x2 - x1) * (y1 - y3) - (y2 - y1) * (x1 - x3)) / denominator; - - // is the intersection along the segments - if (ua < 0 || ua > 1 || ub < 0 || ub > 1) - { - return false; - } - - // Return a object with the x and y coordinates of the intersection - const x = x1 + ua * (x2 - x1); - const y = y1 + ua * (y2 - y1); - - return { x, y }; -} diff --git a/src/examples/v8.0.0-rc/advanced/starWarp.js b/src/examples/v8.0.0-rc/advanced/starWarp.js deleted file mode 100644 index c715e6723..000000000 --- a/src/examples/v8.0.0-rc/advanced/starWarp.js +++ /dev/null @@ -1,89 +0,0 @@ -import * as PIXI from 'pixi.js'; - -const app = new PIXI.Application({ resizeTo: window }); - -document.body.appendChild(app.view); - -// Get the texture for star. -const starTexture = PIXI.Texture.from('https://pixijs.com/assets/star.png'); - -const starAmount = 1000; -let cameraZ = 0; -const fov = 20; -const baseSpeed = 0.025; -let speed = 0; -let warpSpeed = 0; -const starStretch = 5; -const starBaseSize = 0.05; - -// Create the stars -const stars = []; - -for (let i = 0; i < starAmount; i++) -{ - const star = { - sprite: new PIXI.Sprite(starTexture), - z: 0, - x: 0, - y: 0, - }; - - star.sprite.anchor.x = 0.5; - star.sprite.anchor.y = 0.7; - randomizeStar(star, true); - app.stage.addChild(star.sprite); - stars.push(star); -} - -function randomizeStar(star, initial) -{ - star.z = initial ? Math.random() * 2000 : cameraZ + Math.random() * 1000 + 2000; - - // Calculate star positions with radial random coordinate so no star hits the camera. - const deg = Math.random() * Math.PI * 2; - const distance = Math.random() * 50 + 1; - - star.x = Math.cos(deg) * distance; - star.y = Math.sin(deg) * distance; -} - -// Change flight speed every 5 seconds -setInterval(() => -{ - warpSpeed = warpSpeed > 0 ? 0 : 1; -}, 5000); - -// Listen for animate update -app.ticker.add((delta) => -{ - // Simple easing. This should be changed to proper easing function when used for real. - speed += (warpSpeed - speed) / 20; - cameraZ += delta * 10 * (speed + baseSpeed); - for (let i = 0; i < starAmount; i++) - { - const star = stars[i]; - - if (star.z < cameraZ) randomizeStar(star); - - // Map star 3d position to 2d with really simple projection - const z = star.z - cameraZ; - - star.sprite.x = star.x * (fov / z) * app.renderer.screen.width + app.renderer.screen.width / 2; - star.sprite.y = star.y * (fov / z) * app.renderer.screen.width + app.renderer.screen.height / 2; - - // Calculate star scale & rotation. - const dxCenter = star.sprite.x - app.renderer.screen.width / 2; - const dyCenter = star.sprite.y - app.renderer.screen.height / 2; - const distanceCenter = Math.sqrt(dxCenter * dxCenter + dyCenter * dyCenter); - const distanceScale = Math.max(0, (2000 - z) / 2000); - - star.sprite.scale.x = distanceScale * starBaseSize; - // Star is looking towards center so that y axis is towards center. - // Scale the star depending on how fast we are moving, what the stretchfactor is - // and depending on how far away it is from the center. - star.sprite.scale.y - = distanceScale * starBaseSize - + (distanceScale * speed * starStretch * distanceCenter) / app.renderer.screen.width; - star.sprite.rotation = Math.atan2(dyCenter, dxCenter) + Math.PI / 2; - } -}); diff --git a/src/examples/v8.0.0-rc/assets/async.js b/src/examples/v8.0.0-rc/assets/async.js deleted file mode 100644 index 8b4b501ce..000000000 --- a/src/examples/v8.0.0-rc/assets/async.js +++ /dev/null @@ -1,26 +0,0 @@ -import * as PIXI from 'pixi.js'; - -const app = new PIXI.Application({ background: '#1099bb', resizeTo: window }); - -document.body.appendChild(app.view); - -// await can only be used inside an async function -async function init() -{ - const texture = await PIXI.Assets.load('https://pixijs.com/assets/bunny.png'); - - // create a new Sprite from the awaited loaded Texture - const bunny = PIXI.Sprite.from(texture); - - // center the sprite's anchor point - bunny.anchor.set(0.5); - - // move the sprite to the center of the screen - bunny.x = app.screen.width / 2; - bunny.y = app.screen.height / 2; - - app.stage.addChild(bunny); -} - -// Call that async function -init(); diff --git a/src/examples/v8.0.0-rc/assets/background.js b/src/examples/v8.0.0-rc/assets/background.js deleted file mode 100644 index 295d6667a..000000000 --- a/src/examples/v8.0.0-rc/assets/background.js +++ /dev/null @@ -1,37 +0,0 @@ -import * as PIXI from 'pixi.js'; - -const app = new PIXI.Application({ background: '#1099bb', resizeTo: window }); - -document.body.appendChild(app.view); - -// Add the assets to load -PIXI.Assets.add('flowerTop', 'https://pixijs.com/assets/flowerTop.png'); -PIXI.Assets.add('eggHead', 'https://pixijs.com/assets/eggHead.png'); - -// Allow the assets to load in the background -PIXI.Assets.backgroundLoad(['flowerTop', 'eggHead']); - -// If the background load hasn't loaded this asset yet, calling load forces this asset to load now. -PIXI.Assets.load('eggHead').then((texture) => -{ - // auxiliar flag for toggling the texture - let isEggHead = true; - - // create a new Sprite from the resolved loaded texture - const character = new PIXI.Sprite(texture); - - character.anchor.set(0.5); - character.x = app.screen.width / 2; - character.y = app.screen.height / 2; - character.eventMode = 'static'; - character.cursor = 'pointer'; - - app.stage.addChild(character); - - character.on('pointertap', async () => - { - isEggHead = !isEggHead; - // These promise are already resolved in the cache. - character.texture = await PIXI.Assets.load(isEggHead ? 'eggHead' : 'flowerTop'); - }); -}); diff --git a/src/examples/v8.0.0-rc/assets/multiple.js b/src/examples/v8.0.0-rc/assets/multiple.js deleted file mode 100644 index 119dc312e..000000000 --- a/src/examples/v8.0.0-rc/assets/multiple.js +++ /dev/null @@ -1,32 +0,0 @@ -import * as PIXI from 'pixi.js'; - -const app = new PIXI.Application({ background: '#1099bb', resizeTo: window }); - -document.body.appendChild(app.view); - -// Add the assets to load -PIXI.Assets.add('flowerTop', 'https://pixijs.com/assets/flowerTop.png'); -PIXI.Assets.add('eggHead', 'https://pixijs.com/assets/eggHead.png'); - -// Load the assets and get a resolved promise once both are loaded -const texturesPromise = PIXI.Assets.load(['flowerTop', 'eggHead']); // => Promise<{flowerTop: Texture, eggHead: Texture}> - -// When the promise resolves, we have the texture! -texturesPromise.then((textures) => -{ - // create a new Sprite from the resolved loaded Textures - - const flower = PIXI.Sprite.from(textures.flowerTop); - - flower.anchor.set(0.5); - flower.x = app.screen.width * 0.25; - flower.y = app.screen.height / 2; - app.stage.addChild(flower); - - const egg = PIXI.Sprite.from(textures.eggHead); - - egg.anchor.set(0.5); - egg.x = app.screen.width * 0.75; - egg.y = app.screen.height / 2; - app.stage.addChild(egg); -}); diff --git a/src/examples/v8.0.0-rc/assets/promise.js b/src/examples/v8.0.0-rc/assets/promise.js deleted file mode 100644 index 631bc5dcd..000000000 --- a/src/examples/v8.0.0-rc/assets/promise.js +++ /dev/null @@ -1,24 +0,0 @@ -import * as PIXI from 'pixi.js'; - -const app = new PIXI.Application({ background: '#1099bb', resizeTo: window }); - -document.body.appendChild(app.view); - -// Start loading right away and create a promise -const texturePromise = PIXI.Assets.load('https://pixijs.com/assets/bunny.png'); - -// When the promise resolves, we have the texture! -texturePromise.then((resolvedTexture) => -{ - // create a new Sprite from the resolved loaded Texture - const bunny = PIXI.Sprite.from(resolvedTexture); - - // center the sprite's anchor point - bunny.anchor.set(0.5); - - // move the sprite to the center of the screen - bunny.x = app.screen.width / 2; - bunny.y = app.screen.height / 2; - - app.stage.addChild(bunny); -}); diff --git a/src/examples/v8.0.0-rc/basic/blendModes.js b/src/examples/v8.0.0-rc/basic/blendModes.js deleted file mode 100644 index d4e2c8a79..000000000 --- a/src/examples/v8.0.0-rc/basic/blendModes.js +++ /dev/null @@ -1,92 +0,0 @@ -import * as PIXI from 'pixi.js'; - -const app = new PIXI.Application({ resizeTo: window }); - -document.body.appendChild(app.view); - -// create a new background sprite -const background = PIXI.Sprite.from('https://pixijs.com/assets/bg_rotate.jpg'); - -background.width = app.screen.width; -background.height = app.screen.height; -app.stage.addChild(background); - -// create an array to store a reference to the dudes -const dudeArray = []; - -const totaldudes = 20; - -for (let i = 0; i < totaldudes; i++) -{ - // create a new Sprite that uses the image name that we just generated as its source - const dude = PIXI.Sprite.from('https://pixijs.com/assets/flowerTop.png'); - - dude.anchor.set(0.5); - - // set a random scale for the dude - dude.scale.set(0.8 + Math.random() * 0.3); - - // finally let's set the dude to be at a random position... - dude.x = Math.floor(Math.random() * app.screen.width); - dude.y = Math.floor(Math.random() * app.screen.height); - - // The important bit of this example, this is how you change the default blend mode of the sprite - dude.blendMode = PIXI.BLEND_MODES.ADD; - - // create some extra properties that will control movement - dude.direction = Math.random() * Math.PI * 2; - - // this number will be used to modify the direction of the dude over time - dude.turningSpeed = Math.random() - 0.8; - - // create a random speed for the dude between 0 - 2 - dude.speed = 2 + Math.random() * 2; - - // finally we push the dude into the dudeArray so it it can be easily accessed later - dudeArray.push(dude); - - app.stage.addChild(dude); -} - -// create a bounding box for the little dudes -const dudeBoundsPadding = 100; - -const dudeBounds = new PIXI.Rectangle( - -dudeBoundsPadding, - -dudeBoundsPadding, - app.screen.width + dudeBoundsPadding * 2, - app.screen.height + dudeBoundsPadding * 2, -); - -app.ticker.add(() => -{ - // iterate through the dudes and update the positions - for (let i = 0; i < dudeArray.length; i++) - { - const dude = dudeArray[i]; - - dude.direction += dude.turningSpeed * 0.01; - dude.x += Math.sin(dude.direction) * dude.speed; - dude.y += Math.cos(dude.direction) * dude.speed; - dude.rotation = -dude.direction - Math.PI / 2; - - // wrap the dudes by testing their bounds... - if (dude.x < dudeBounds.x) - { - dude.x += dudeBounds.width; - } - else if (dude.x > dudeBounds.x + dudeBounds.width) - { - dude.x -= dudeBounds.width; - } - - if (dude.y < dudeBounds.y) - { - dude.y += dudeBounds.height; - } - else if (dude.y > dudeBounds.y + dudeBounds.height) - { - dude.y -= dudeBounds.height; - } - } -}); diff --git a/src/examples/v8.0.0-rc/basic/cacheAsBitmap.js b/src/examples/v8.0.0-rc/basic/cacheAsBitmap.js deleted file mode 100644 index d5942007d..000000000 --- a/src/examples/v8.0.0-rc/basic/cacheAsBitmap.js +++ /dev/null @@ -1,73 +0,0 @@ -import * as PIXI from 'pixi.js'; - -const app = new PIXI.Application({ resizeTo: window }); - -document.body.appendChild(app.view); - -app.stop(); - -// load resources -PIXI.Assets.load('https://pixijs.com/assets/spritesheet/monsters.json').then(onAssetsLoaded); - -// holder to store aliens -const aliens = []; -const alienFrames = ['eggHead.png', 'flowerTop.png', 'helmlok.png', 'skully.png']; - -let count = 0; - -// create an empty container -const alienContainer = new PIXI.Container(); - -alienContainer.x = 400; -alienContainer.y = 300; - -// make the stage interactive -app.stage.eventMode = 'static'; -app.stage.addChild(alienContainer); - -function onAssetsLoaded() -{ - // add a bunch of aliens with textures from image paths - for (let i = 0; i < 100; i++) - { - const frameName = alienFrames[i % 4]; - - // create an alien using the frame name.. - const alien = PIXI.Sprite.from(frameName); - - alien.tint = Math.random() * 0xffffff; - - alien.x = Math.random() * 800 - 400; - alien.y = Math.random() * 600 - 300; - alien.anchor.x = 0.5; - alien.anchor.y = 0.5; - aliens.push(alien); - alienContainer.addChild(alien); - } - app.start(); -} - -// Combines both mouse click + touch tap -app.stage.on('pointertap', onClick); - -function onClick() -{ - alienContainer.cacheAsBitmap = !alienContainer.cacheAsBitmap; -} - -app.ticker.add(() => -{ - // let's rotate the aliens a little bit - for (let i = 0; i < 100; i++) - { - const alien = aliens[i]; - - alien.rotation += 0.1; - } - - count += 0.01; - - alienContainer.scale.x = Math.sin(count); - alienContainer.scale.y = Math.sin(count); - alienContainer.rotation += 0.01; -}); diff --git a/src/examples/v8.0.0-rc/basic/container.js b/src/examples/v8.0.0-rc/basic/container.js deleted file mode 100644 index 9d23157ca..000000000 --- a/src/examples/v8.0.0-rc/basic/container.js +++ /dev/null @@ -1,39 +0,0 @@ -import * as PIXI from 'pixi.js'; - -const app = new PIXI.Application({ background: '#1099bb', resizeTo: window }); - -document.body.appendChild(app.view); - -const container = new PIXI.Container(); - -app.stage.addChild(container); - -// Create a new texture -const texture = PIXI.Texture.from('https://pixijs.com/assets/bunny.png'); - -// Create a 5x5 grid of bunnies -for (let i = 0; i < 25; i++) -{ - const bunny = new PIXI.Sprite(texture); - - bunny.anchor.set(0.5); - bunny.x = (i % 5) * 40; - bunny.y = Math.floor(i / 5) * 40; - container.addChild(bunny); -} - -// Move container to the center -container.x = app.screen.width / 2; -container.y = app.screen.height / 2; - -// Center bunny sprite in local container coordinates -container.pivot.x = container.width / 2; -container.pivot.y = container.height / 2; - -// Listen for animate update -app.ticker.add((delta) => -{ - // rotate the container! - // use delta to create frame-independent transform - container.rotation -= 0.01 * delta; -}); diff --git a/src/examples/v8.0.0-rc/basic/particleContainer.js b/src/examples/v8.0.0-rc/basic/particleContainer.js deleted file mode 100644 index 4dc6d56b2..000000000 --- a/src/examples/v8.0.0-rc/basic/particleContainer.js +++ /dev/null @@ -1,102 +0,0 @@ -import * as PIXI from 'pixi.js'; - -const app = new PIXI.Application({ resizeTo: window }); - -document.body.appendChild(app.view); - -const sprites = new PIXI.ParticleContainer(10000, { - scale: true, - position: true, - rotation: true, - uvs: true, - alpha: true, -}); - -app.stage.addChild(sprites); - -// create an array to store all the sprites -const maggots = []; - -const totalSprites = app.renderer instanceof PIXI.Renderer ? 10000 : 100; - -for (let i = 0; i < totalSprites; i++) -{ - // create a new Sprite - const dude = PIXI.Sprite.from('https://pixijs.com/assets/maggot_tiny.png'); - - // set the anchor point so the texture is centerd on the sprite - dude.anchor.set(0.5); - - // different maggots, different sizes - dude.scale.set(0.8 + Math.random() * 0.3); - - // scatter them all - dude.x = Math.random() * app.screen.width; - dude.y = Math.random() * app.screen.height; - - dude.tint = Math.random() * 0x808080; - - // create a random direction in radians - dude.direction = Math.random() * Math.PI * 2; - - // this number will be used to modify the direction of the sprite over time - dude.turningSpeed = Math.random() - 0.8; - - // create a random speed between 0 - 2, and these maggots are slooww - dude.speed = (2 + Math.random() * 2) * 0.2; - - dude.offset = Math.random() * 100; - - // finally we push the dude into the maggots array so it it can be easily accessed later - maggots.push(dude); - - sprites.addChild(dude); -} - -// create a bounding box box for the little maggots -const dudeBoundsPadding = 100; -const dudeBounds = new PIXI.Rectangle( - -dudeBoundsPadding, - -dudeBoundsPadding, - app.screen.width + dudeBoundsPadding * 2, - app.screen.height + dudeBoundsPadding * 2, -); - -let tick = 0; - -app.ticker.add(() => -{ - // iterate through the sprites and update their position - for (let i = 0; i < maggots.length; i++) - { - const dude = maggots[i]; - - dude.scale.y = 0.95 + Math.sin(tick + dude.offset) * 0.05; - dude.direction += dude.turningSpeed * 0.01; - dude.x += Math.sin(dude.direction) * (dude.speed * dude.scale.y); - dude.y += Math.cos(dude.direction) * (dude.speed * dude.scale.y); - dude.rotation = -dude.direction + Math.PI; - - // wrap the maggots - if (dude.x < dudeBounds.x) - { - dude.x += dudeBounds.width; - } - else if (dude.x > dudeBounds.x + dudeBounds.width) - { - dude.x -= dudeBounds.width; - } - - if (dude.y < dudeBounds.y) - { - dude.y += dudeBounds.height; - } - else if (dude.y > dudeBounds.y + dudeBounds.height) - { - dude.y -= dudeBounds.height; - } - } - - // increment the ticker - tick += 0.1; -}); diff --git a/src/examples/v8.0.0-rc/basic/simplePlane.js b/src/examples/v8.0.0-rc/basic/simplePlane.js deleted file mode 100644 index 72faba2c5..000000000 --- a/src/examples/v8.0.0-rc/basic/simplePlane.js +++ /dev/null @@ -1,32 +0,0 @@ -import * as PIXI from 'pixi.js'; - -const app = new PIXI.Application({ background: '#1099bb', resizeTo: window }); - -document.body.appendChild(app.view); - -PIXI.Assets.load('https://pixijs.com/assets/bg_grass.jpg').then((texture) => -{ - const plane = new PIXI.SimplePlane(texture, 10, 10); - - plane.x = 100; - plane.y = 100; - - app.stage.addChild(plane); - - // Get the buffer for vertice positions. - const buffer = plane.geometry.getBuffer('aVertexPosition'); - - // Listen for animate update - let timer = 0; - - app.ticker.add(() => - { - // Randomize the vertice positions a bit to create movement. - for (let i = 0; i < buffer.data.length; i++) - { - buffer.data[i] += Math.sin(timer / 10 + i) * 0.5; - } - buffer.update(); - timer++; - }); -}); diff --git a/src/examples/v8.0.0-rc/basic/tinting.js b/src/examples/v8.0.0-rc/basic/tinting.js deleted file mode 100644 index e52ddc6f8..000000000 --- a/src/examples/v8.0.0-rc/basic/tinting.js +++ /dev/null @@ -1,85 +0,0 @@ -import * as PIXI from 'pixi.js'; - -const app = new PIXI.Application({ resizeTo: window }); - -document.body.appendChild(app.view); - -// holder to store the aliens -const aliens = []; - -const totalDudes = 20; - -for (let i = 0; i < totalDudes; i++) -{ - // create a new Sprite that uses the image name that we just generated as its source - const dude = PIXI.Sprite.from('https://pixijs.com/assets/eggHead.png'); - - // set the anchor point so the texture is centered on the sprite - dude.anchor.set(0.5); - - // set a random scale for the dude - no point them all being the same size! - dude.scale.set(0.8 + Math.random() * 0.3); - - // finally lets set the dude to be at a random position.. - dude.x = Math.random() * app.screen.width; - dude.y = Math.random() * app.screen.height; - - dude.tint = Math.random() * 0xffffff; - - // create some extra properties that will control movement : - // create a random direction in radians. This is a number between 0 and PI*2 which is the equivalent of 0 - 360 degrees - dude.direction = Math.random() * Math.PI * 2; - - // this number will be used to modify the direction of the dude over time - dude.turningSpeed = Math.random() - 0.8; - - // create a random speed for the dude between 2 - 4 - dude.speed = 2 + Math.random() * 2; - - // finally we push the dude into the aliens array so it it can be easily accessed later - aliens.push(dude); - - app.stage.addChild(dude); -} - -// create a bounding box for the little dudes -const dudeBoundsPadding = 100; -const dudeBounds = new PIXI.Rectangle( - -dudeBoundsPadding, - -dudeBoundsPadding, - app.screen.width + dudeBoundsPadding * 2, - app.screen.height + dudeBoundsPadding * 2, -); - -app.ticker.add(() => -{ - // iterate through the dudes and update their position - for (let i = 0; i < aliens.length; i++) - { - const dude = aliens[i]; - - dude.direction += dude.turningSpeed * 0.01; - dude.x += Math.sin(dude.direction) * dude.speed; - dude.y += Math.cos(dude.direction) * dude.speed; - dude.rotation = -dude.direction - Math.PI / 2; - - // wrap the dudes by testing their bounds... - if (dude.x < dudeBounds.x) - { - dude.x += dudeBounds.width; - } - else if (dude.x > dudeBounds.x + dudeBounds.width) - { - dude.x -= dudeBounds.width; - } - - if (dude.y < dudeBounds.y) - { - dude.y += dudeBounds.height; - } - else if (dude.y > dudeBounds.y + dudeBounds.height) - { - dude.y -= dudeBounds.height; - } - } -}); diff --git a/src/examples/v8.0.0-rc/basic/transparentBackground.js b/src/examples/v8.0.0-rc/basic/transparentBackground.js deleted file mode 100644 index f31e19be8..000000000 --- a/src/examples/v8.0.0-rc/basic/transparentBackground.js +++ /dev/null @@ -1,23 +0,0 @@ -import * as PIXI from 'pixi.js'; - -const app = new PIXI.Application({ backgroundAlpha: 0, resizeTo: window }); - -document.body.appendChild(app.view); - -// create a new Sprite from an image path. -const bunny = PIXI.Sprite.from('https://pixijs.com/assets/bunny.png'); - -// center the sprite's anchor point -bunny.anchor.set(0.5); - -// move the sprite to the center of the screen -bunny.x = app.screen.width / 2; -bunny.y = app.screen.height / 2; - -app.stage.addChild(bunny); - -app.ticker.add(() => -{ - // just for fun, let's rotate mr rabbit a little - bunny.rotation += 0.1; -}); diff --git a/src/examples/v8.0.0-rc/events/click.js b/src/examples/v8.0.0-rc/events/click.js deleted file mode 100644 index 24ab92686..000000000 --- a/src/examples/v8.0.0-rc/events/click.js +++ /dev/null @@ -1,36 +0,0 @@ -import * as PIXI from 'pixi.js'; - -const app = new PIXI.Application({ background: '#1099bb', resizeTo: window }); - -document.body.appendChild(app.view); - -// Scale mode for all textures, will retain pixelation -PIXI.settings.SCALE_MODE = PIXI.SCALE_MODES.NEAREST; - -const sprite = PIXI.Sprite.from('https://pixijs.com/assets/bunny.png'); - -// Set the initial position -sprite.anchor.set(0.5); -sprite.x = app.screen.width / 2; -sprite.y = app.screen.height / 2; - -// Opt-in to interactivity -sprite.eventMode = 'static'; - -// Shows hand cursor -sprite.cursor = 'pointer'; - -// Pointers normalize touch and mouse (good for mobile and desktop) -sprite.on('pointerdown', onClick); - -// Alternatively, use the mouse & touch events: -// sprite.on('click', onClick); // mouse-only -// sprite.on('tap', onClick); // touch-only - -app.stage.addChild(sprite); - -function onClick() -{ - sprite.scale.x *= 1.25; - sprite.scale.y *= 1.25; -} diff --git a/src/examples/v8.0.0-rc/events/customHitarea.js b/src/examples/v8.0.0-rc/events/customHitarea.js deleted file mode 100644 index 852b95e1c..000000000 --- a/src/examples/v8.0.0-rc/events/customHitarea.js +++ /dev/null @@ -1,116 +0,0 @@ -import * as PIXI from 'pixi.js'; - -const app = new PIXI.Application(800, 600, { background: '#1099bb' }); - -document.body.appendChild(app.view); - -const yellowStar = PIXI.Texture.from('https://pixijs.com/assets/yellowstar.png'); - -// Standard Sprite Button -const starButton1 = new PIXI.Sprite(yellowStar); - -starButton1.position.set(50, 200); -starButton1.cursor = 'pointer'; -starButton1.eventMode = 'static'; - -starButton1 - .on('pointerdown', onClick, starButton1) - .on('pointerover', onPointerOver, starButton1) - .on('pointerout', onPointerOut, starButton1); - -// Custom Hitarea Button -const starButton2 = new PIXI.Sprite(yellowStar); - -starButton2.position.set(250, 200); - -// Create a hitarea that matches the sprite, which will be used for point -// intersection -starButton2.hitArea = new PIXI.Polygon([ - 80, 0, 100, 50, 160, 55, 115, 95, 130, 150, 80, 120, 30, 150, 45, 95, 0, 55, 60, 50, -]); -starButton2.cursor = 'pointer'; -starButton2.eventMode = 'static'; - -starButton2 - .on('pointerdown', onClick, starButton2) - .on('pointerover', onPointerOver, starButton2) - .on('pointerout', onPointerOut, starButton2); - -// With Mask, No Hit Area -const starButton3 = new PIXI.Sprite(yellowStar); - -starButton3.position.set(450, 200); -starButton3.cursor = 'pointer'; -starButton3.eventMode = 'static'; - -const squareMask = new PIXI.Graphics().beginFill(0xffffff).drawRect(starButton3.x, starButton3.y, 75, 200).endFill(); - -starButton3.mask = squareMask; - -starButton3 - .on('pointerdown', onClick, starButton3) - .on('pointerover', onPointerOver, starButton3) - .on('pointerout', onPointerOut, starButton3); - -// With a Mask and Hit Area -// Hitareas ignore masks. You can still click on a button made in this way, -// even from areas covered by a mask -const starButton4 = new PIXI.Sprite(yellowStar); - -starButton4.position.set(600, 200); - -const squareMask2 = new PIXI.Graphics().beginFill(0xffffff).drawRect(starButton4.x, starButton4.y, 75, 200).endFill(); - -starButton4.mask = squareMask2; - -// Again, hitarea for intersection checks -starButton4.hitArea = new PIXI.Polygon([ - 80, 0, 100, 50, 160, 55, 115, 95, 130, 150, 80, 120, 30, 150, 45, 95, 0, 55, 60, 50, -]); -starButton4.cursor = 'pointer'; -starButton4.eventMode = 'static'; - -starButton4 - .on('pointerdown', onClick, starButton4) - .on('pointerover', onPointerOver, starButton4) - .on('pointerout', onPointerOut, starButton4); - -const style = new PIXI.TextStyle({ fill: '#ffffff' }); - -const text1 = new PIXI.Text('Standard', style); - -text1.x = starButton1.x + 25; -text1.y = starButton1.y + 170; - -const text2 = new PIXI.Text('Hit Area', style); - -text2.x = starButton2.x + 35; -text2.y = starButton2.y + 170; - -const text3 = new PIXI.Text('Mask', style); - -text3.x = starButton3.x + 10; -text3.y = starButton3.y + 170; - -const text4 = new PIXI.Text('Mask + Hit Area', style); - -text4.x = starButton4.x - 10; -text4.y = starButton4.y + 170; - -// Add to stage -app.stage.addChild(starButton2, starButton1, starButton3, starButton4, squareMask, squareMask2, text1, text2, text3, text4); - -function onClick() -{ - this.tint = 0x333333; -} - -function onPointerOver() -{ - this.tint = 0x666666; -} - -function onPointerOut() -{ - this.tint = 0xffffff; -} diff --git a/src/examples/v8.0.0-rc/events/customMouseIcon.js b/src/examples/v8.0.0-rc/events/customMouseIcon.js deleted file mode 100644 index 4e479cece..000000000 --- a/src/examples/v8.0.0-rc/events/customMouseIcon.js +++ /dev/null @@ -1,104 +0,0 @@ -import * as PIXI from 'pixi.js'; - -const app = new PIXI.Application({ background: '#1099bb', resizeTo: window }); - -document.body.appendChild(app.view); - -// Css style for icons -const defaultIcon = 'url(\'https://pixijs.com/assets/bunny.png\'),auto'; -const hoverIcon = 'url(\'https://pixijs.com/assets/bunny_saturated.png\'),auto'; - -// Add custom cursor styles -app.renderer.events.cursorStyles.default = defaultIcon; -app.renderer.events.cursorStyles.hover = hoverIcon; - -// create a background... -const background = PIXI.Sprite.from('https://pixijs.com/assets/bg_button.jpg'); - -background.width = app.screen.width; -background.height = app.screen.height; -// add background to stage... -app.stage.addChild(background); - -// create some textures from an image path -const textureButton = PIXI.Texture.from('https://pixijs.com/assets/button.png'); -const textureButtonDown = PIXI.Texture.from('https://pixijs.com/assets/button_down.png'); -const textureButtonOver = PIXI.Texture.from('https://pixijs.com/assets/button_over.png'); - -const buttons = []; - -const buttonPositions = [175, 75, 655, 75, 410, 325, 150, 465, 685, 445]; - -for (let i = 0; i < 5; i++) -{ - const button = new PIXI.Sprite(textureButton); - - button.cursor = 'hover'; - - button.anchor.set(0.5); - button.x = buttonPositions[i * 2]; - button.y = buttonPositions[i * 2 + 1]; - - // make the button interactive... - button.eventMode = 'static'; - - button - .on('pointerdown', onButtonDown) - .on('pointerup', onButtonUp) - .on('pointerupoutside', onButtonUp) - .on('pointerover', onButtonOver) - .on('pointerout', onButtonOut); - - // add it to the stage - app.stage.addChild(button); - - // add button to array - buttons.push(button); -} - -// set some silly values... -buttons[0].scale.set(1.2); -buttons[2].rotation = Math.PI / 10; -buttons[3].scale.set(0.8); -buttons[4].scale.set(0.8, 1.2); -buttons[4].rotation = Math.PI; - -function onButtonDown() -{ - this.isdown = true; - this.texture = textureButtonDown; - this.alpha = 1; -} - -function onButtonUp() -{ - this.isdown = false; - if (this.isOver) - { - this.texture = textureButtonOver; - } - else - { - this.texture = textureButton; - } -} - -function onButtonOver() -{ - this.isOver = true; - if (this.isdown) - { - return; - } - this.texture = textureButtonOver; -} - -function onButtonOut() -{ - this.isOver = false; - if (this.isdown) - { - return; - } - this.texture = textureButton; -} diff --git a/src/examples/v8.0.0-rc/events/dragging.js b/src/examples/v8.0.0-rc/events/dragging.js deleted file mode 100644 index 010260eec..000000000 --- a/src/examples/v8.0.0-rc/events/dragging.js +++ /dev/null @@ -1,81 +0,0 @@ -import * as PIXI from 'pixi.js'; - -const app = new PIXI.Application({ background: '#1099bb', resizeTo: window }); - -document.body.appendChild(app.view); - -// create a texture from an image path -const texture = PIXI.Texture.from('https://pixijs.com/assets/bunny.png'); - -// Scale mode for pixelation -texture.baseTexture.scaleMode = PIXI.SCALE_MODES.NEAREST; - -for (let i = 0; i < 10; i++) -{ - createBunny(Math.floor(Math.random() * app.screen.width), Math.floor(Math.random() * app.screen.height)); -} - -function createBunny(x, y) -{ - // create our little bunny friend.. - const bunny = new PIXI.Sprite(texture); - - // enable the bunny to be interactive... this will allow it to respond to mouse and touch events - bunny.eventMode = 'static'; - - // this button mode will mean the hand cursor appears when you roll over the bunny with your mouse - bunny.cursor = 'pointer'; - - // center the bunny's anchor point - bunny.anchor.set(0.5); - - // make it a bit bigger, so it's easier to grab - bunny.scale.set(3); - - // setup events for mouse + touch using - // the pointer events - bunny.on('pointerdown', onDragStart, bunny); - - // move the sprite to its designated position - bunny.x = x; - bunny.y = y; - - // add it to the stage - app.stage.addChild(bunny); -} - -let dragTarget = null; - -app.stage.eventMode = 'static'; -app.stage.hitArea = app.screen; -app.stage.on('pointerup', onDragEnd); -app.stage.on('pointerupoutside', onDragEnd); - -function onDragMove(event) -{ - if (dragTarget) - { - dragTarget.parent.toLocal(event.global, null, dragTarget.position); - } -} - -function onDragStart() -{ - // store a reference to the data - // the reason for this is because of multitouch - // we want to track the movement of this particular touch - // this.data = event.data; - this.alpha = 0.5; - dragTarget = this; - app.stage.on('pointermove', onDragMove); -} - -function onDragEnd() -{ - if (dragTarget) - { - app.stage.off('pointermove', onDragMove); - dragTarget.alpha = 1; - dragTarget = null; - } -} diff --git a/src/examples/v8.0.0-rc/events/interactivity.js b/src/examples/v8.0.0-rc/events/interactivity.js deleted file mode 100644 index 665e0f752..000000000 --- a/src/examples/v8.0.0-rc/events/interactivity.js +++ /dev/null @@ -1,111 +0,0 @@ -import * as PIXI from 'pixi.js'; - -const app = new PIXI.Application({ resizeTo: window }); - -document.body.appendChild(app.view); - -// create a background... -const background = PIXI.Sprite.from('https://pixijs.com/assets/bg_button.jpg'); - -background.width = app.screen.width; -background.height = app.screen.height; - -// add background to stage... -app.stage.addChild(background); - -// create some textures from an image path -const textureButton = PIXI.Texture.from('https://pixijs.com/assets/button.png'); -const textureButtonDown = PIXI.Texture.from('https://pixijs.com/assets/button_down.png'); -const textureButtonOver = PIXI.Texture.from('https://pixijs.com/assets/button_over.png'); - -const buttons = []; - -const buttonPositions = [175, 75, 655, 75, 410, 325, 150, 465, 685, 445]; - -for (let i = 0; i < 5; i++) -{ - const button = new PIXI.Sprite(textureButton); - - button.anchor.set(0.5); - button.x = buttonPositions[i * 2]; - button.y = buttonPositions[i * 2 + 1]; - - // make the button interactive... - button.eventMode = 'static'; - button.cursor = 'pointer'; - - button - // Mouse & touch events are normalized into - // the pointer* events for handling different - // button events. - .on('pointerdown', onButtonDown) - .on('pointerup', onButtonUp) - .on('pointerupoutside', onButtonUp) - .on('pointerover', onButtonOver) - .on('pointerout', onButtonOut); - - // Use mouse-only events - // .on('mousedown', onButtonDown) - // .on('mouseup', onButtonUp) - // .on('mouseupoutside', onButtonUp) - // .on('mouseover', onButtonOver) - // .on('mouseout', onButtonOut) - - // Use touch-only events - // .on('touchstart', onButtonDown) - // .on('touchend', onButtonUp) - // .on('touchendoutside', onButtonUp) - - // add it to the stage - app.stage.addChild(button); - - // add button to array - buttons.push(button); -} - -// set some silly values... -buttons[0].scale.set(1.2); -buttons[2].rotation = Math.PI / 10; -buttons[3].scale.set(0.8); -buttons[4].scale.set(0.8, 1.2); -buttons[4].rotation = Math.PI; - -function onButtonDown() -{ - this.isdown = true; - this.texture = textureButtonDown; - this.alpha = 1; -} - -function onButtonUp() -{ - this.isdown = false; - if (this.isOver) - { - this.texture = textureButtonOver; - } - else - { - this.texture = textureButton; - } -} - -function onButtonOver() -{ - this.isOver = true; - if (this.isdown) - { - return; - } - this.texture = textureButtonOver; -} - -function onButtonOut() -{ - this.isOver = false; - if (this.isdown) - { - return; - } - this.texture = textureButton; -} diff --git a/src/examples/v8.0.0-rc/events/logger.js b/src/examples/v8.0.0-rc/events/logger.js deleted file mode 100644 index a76c32f0c..000000000 --- a/src/examples/v8.0.0-rc/events/logger.js +++ /dev/null @@ -1,86 +0,0 @@ -import * as PIXI from 'pixi.js'; - -// This example logs the order of events hover-related events in the scene. -const app = new PIXI.Application({ - antialias: true, - background: '#1099bb', -}); - -document.body.appendChild(app.view); - -const title = app.stage.addChild( - new PIXI.Text( - `Move your mouse slowly over the boxes to - see the order of pointerenter, pointerleave, - pointerover, pointerout events on each target!`, - { - fontSize: 16, - }, - ), -); - -title.x = 2; - -const logs = []; -const logText = app.stage.addChild( - new PIXI.Text('', { - fontSize: 14, - }), -); - -logText.y = 80; -logText.x = 2; - -app.stage.name = 'stage'; - -// Mount outer black box -const blackBox = app.stage.addChild(new PIXI.Graphics().beginFill(0).drawRect(0, 0, 400, 400).endFill()); - -blackBox.name = 'black box'; -blackBox.x = 400; - -// Mount white box inside the white one -const whiteBox = blackBox.addChild(new PIXI.Graphics().beginFill(0xffffff).drawRect(100, 100, 200, 200).endFill()); - -whiteBox.name = 'white box'; - -// Enable interactivity everywhere! -app.stage.eventMode = 'static'; -app.stage.hitArea = app.screen; -whiteBox.eventMode = 'static'; -blackBox.eventMode = 'static'; - -function onEvent(e) -{ - const type = e.type; - const targetName = e.target.name; - const currentTargetName = e.currentTarget.name; - - // Add event to top of logs - logs.push(`${currentTargetName} received ${type} event (target is ${targetName})`); - - if (currentTargetName === 'stage' || type === 'pointerenter' || type === 'pointerleave') - { - logs.push('-----------------------------------------', ''); - } - - // Prevent logs from growing too long - if (logs.length > 30) - { - while (logs.length > 30) - { - logs.shift(); - } - } - - // Update logText - logText.text = logs.join('\n'); -} - -[app.stage, whiteBox, blackBox].forEach((object) => -{ - object.addEventListener('pointerenter', onEvent); - object.addEventListener('pointerleave', onEvent); - object.addEventListener('pointerover', onEvent); - object.addEventListener('pointerout', onEvent); -}); diff --git a/src/examples/v8.0.0-rc/events/nestedBoundaryWithProjection.js b/src/examples/v8.0.0-rc/events/nestedBoundaryWithProjection.js deleted file mode 100644 index 430a192ca..000000000 --- a/src/examples/v8.0.0-rc/events/nestedBoundaryWithProjection.js +++ /dev/null @@ -1,231 +0,0 @@ -import * as PIXI from 'pixi.js'; -import '@pixi/graphics-extras'; - -// This example shows how you can setup a nested boundary to propagate events -// into a disjoint scene graph. Here, a camera is used to project an different -// world onto the canvas. - -const app = new PIXI.Application({ - antialias: true, - background: '#1099bb', -}); - -document.body.appendChild(app.view); - -// A projector renders it's content using projection. The transforms in -// the contents scene graph don't change if you move the camera. To achieve -// this, the content is not added as a "child" to the projector; however, this -// means events won't propagate into the content by default. -// -// To solve this, we nest our own EventBoundary, and connect it using -// addEventListener! -class Projector extends PIXI.DisplayObject -{ - constructor() - { - super(); - - // The content root to be rendered by this camera. - this.content = new PIXI.Container(); - - // Temporary matrix to store the original projection transform. - this.originalTransform = new PIXI.Matrix(); - - // The event boundary that'll map events downstream into the content - // scene. - this.boundary = new PIXI.EventBoundary(this.content); - - // Override copyMouseData to apply inverse worldTransform on - // global coords - this.boundary.copyMouseData = (from, to) => - { - // Apply default implementation first - PIXI.EventBoundary.prototype.copyMouseData.call(this.boundary, from, to); - - // Then bring global coords into content's world - this.worldTransform.applyInverse(to.global, to.global); - // TODO: Remove after https://github.com/pixijs/pixi.js/pull/7381 - // is merged! - to.target = this.boundary.hitTest(to.global.x, to.global.y); - }; - - // Propagate these events down into the content's scene graph! - ['pointerdown', 'pointerup', 'pointermove', 'pointerover', 'pointerout', 'wheel'].forEach((event) => - { - this.addEventListener(event, (e) => this.boundary.mapEvent(e)); - }); - - this.eventMode = 'static'; - } - - // Pass through cursor - get cursor() - { - return this.boundary.cursor; - } - - // eslint-disable-next-line class-methods-use-this - set cursor(value) - { - throw new Error('The camera\'s cursor is derived from its content!'); - } - - // Pass through calculateBounds - calculateBounds() - { - const contentBounds = this.content.getBounds(); - - this._bounds.addFrameMatrix( - this.worldTransform, - contentBounds.x, - contentBounds.y, - contentBounds.width, - contentBounds.height, - ); - } - - // Pass through containsPoint - containsPoint(point) - { - return !!this.boundary.hitTest(point.x, point.y); - } - - // Render content with projection - render(renderer) - { - renderer.batch.flush(); - - const projectionSystem = renderer.projection; - const renderTextureSystem = renderer.renderTexture; - - projectionSystem.transform = projectionSystem.transform || new PIXI.Matrix(); - projectionSystem.transform.copyTo(this.originalTransform); - projectionSystem.transform.append(this.worldTransform); - projectionSystem.update(null, null, 1, !renderTextureSystem.current); - - this.content.render(renderer); - - renderer.batch.flush(); - - projectionSystem.transform.copyFrom(this.originalTransform); - projectionSystem.update(null, null, 1, !renderTextureSystem.current); - } - - // updateTransform also updates content's transform - updateTransform() - { - super.updateTransform(); - - this.content.enableTempParent(); - this.content.updateTransform(); - this.content.disableTempParent(null); - } -} - -// The projector -const projector = app.stage.addChild(new Projector()); - -// Add coordinate axes! -projector.content.addChild( - new PIXI.Graphics() - .lineStyle({ color: 0, alpha: 0.2, width: 2 }) - .moveTo(0, -300) - .lineTo(0, 600) - .moveTo(-100, 0) - .lineTo(700, 0), -); - -// Construct the star Graphics -const stars = [1, 2, 3].map((i) => new PIXI.Graphics().beginFill(0xffffff, 0.75).drawStar(0, 0, 18 / i, (100 * i) / 2)); - -// Place the stars -stars[0].x = 0; -stars[1].x = 200; -stars[2].x = 500; - -// Add stars to the projector -projector.content.addChild(...stars); - -// Make projection x+100, y+300 -projector.x = 100; -projector.y = 300; -projector.content.hitArea = new PIXI.Rectangle(-100, -300, app.screen.width, app.screen.height); -// Make hit-area cover the whole screen so we can capture -// pointermove everywhere! -projector.hitArea = projector.content.hitArea; -projector.content.eventMode = 'static'; - -// Make stars interactive & add wheel handlers -stars.forEach((star) => -{ - // Make star interactive - star.eventMode = 'static'; - - // Set initial cursor - star.cursor = 'zoom-in'; - - // Add wheel rotation feedback - star.addEventListener('wheel', (e) => - { - const scroll = Math.sign(e.deltaY) * Math.min(15, Math.abs(e.deltaY)); - - star.rotation += scroll / 100; - }); - - // Add click zoom-in/zoom-out handler - star.addEventListener('click', (e) => - { - if (star.scale.x === 1) - { - star.scale.set(1.33); - star.cursor = 'zoom-out'; - } - else - { - star.scale.set(1); - star.cursor = 'zoom-in'; - } - }); -}); - -PIXI.BitmapFont.from( - 'coordinates', - { - fontFamily: 'Roboto', - fontSize: 16, - fill: '#272d37', - }, - { chars: ['Global:() Screen-.,', ['0', '9']] }, -); - -const coordinates = new PIXI.BitmapText('Global: (0, 0)\nScreen: (0, 0)', { - fontName: 'coordinates', -}); - -coordinates.x = 110; -coordinates.y = 550; - -app.stage.addChild(coordinates); - -projector.content.addEventListener('pointermove', (e) => -{ - const global = `(${e.global.x | 0}, ${e.global.y | 0})`; - const screen = `(${e.screen.x | 0}, ${e.screen.y | 0})`; - - coordinates.text = `Global: ${global}\nScreen: ${screen}`; -}); - -const description = new PIXI.Text( - 'The (0, 0) world coordinates for the content is located at the center of the first star!' - + '\n * Mouse wheel over stars to rotate them' - + '\n * Click to zoom in or out', - { - fontSize: 16, - fontFamily: 'Roboto', - fill: '#272d37', - }, -); - -description.position.set(110, 12); - -app.stage.addChild(description); diff --git a/src/examples/v8.0.0-rc/events/pointerTracker.js b/src/examples/v8.0.0-rc/events/pointerTracker.js deleted file mode 100644 index 97c805c8b..000000000 --- a/src/examples/v8.0.0-rc/events/pointerTracker.js +++ /dev/null @@ -1,34 +0,0 @@ -import * as PIXI from 'pixi.js'; - -// In this a example, a circle will follow the pointer wherever it -// moves over the canvas. - -const app = new PIXI.Application({ - antialias: true, - background: '#1099bb', -}); - -document.body.appendChild(app.view); - -// Create the circle -const circle = app.stage.addChild( - new PIXI.Graphics() - .beginFill(0xffffff) - .lineStyle({ color: 0x111111, alpha: 0.87, width: 1 }) - .drawCircle(0, 0, 8) - .endFill(), -); - -circle.position.set(app.screen.width / 2, app.screen.height / 2); - -// Enable interactivity! -app.stage.eventMode = 'static'; - -// Make sure the whole canvas area is interactive, not just the circle. -app.stage.hitArea = app.screen; - -// Follow the pointer -app.stage.addEventListener('pointermove', (e) => -{ - circle.position.copyFrom(e.global); -}); diff --git a/src/examples/v8.0.0-rc/events/slider.js b/src/examples/v8.0.0-rc/events/slider.js deleted file mode 100644 index 1d1848d24..000000000 --- a/src/examples/v8.0.0-rc/events/slider.js +++ /dev/null @@ -1,84 +0,0 @@ -import * as PIXI from 'pixi.js'; - -const app = new PIXI.Application({ - antialias: true, - background: '#1099bb', -}); - -document.body.appendChild(app.view); - -const stageHeight = app.screen.height; -const stageWidth = app.screen.width; - -// Make sure stage covers the whole scene -app.stage.hitArea = app.screen; - -// Make the slider -const sliderWidth = 320; -const slider = new PIXI.Graphics().beginFill(0x272d37).drawRect(0, 0, sliderWidth, 4); - -slider.x = (stageWidth - sliderWidth) / 2; -slider.y = stageHeight * 0.75; - -// Draw the handle -const handle = new PIXI.Graphics().beginFill(0xffffff).drawCircle(0, 0, 8); - -handle.y = slider.height / 2; -handle.x = sliderWidth / 2; -handle.eventMode = 'static'; -handle.cursor = 'pointer'; - -handle.on('pointerdown', onDragStart).on('pointerup', onDragEnd).on('pointerupoutside', onDragEnd); - -app.stage.addChild(slider); -slider.addChild(handle); - -// Add bunny whose scale can be changed by user using slider -const bunny = app.stage.addChild(PIXI.Sprite.from('https://pixijs.com/assets/bunny.png')); - -bunny.texture.baseTexture.scaleMode = PIXI.SCALE_MODES.NEAREST; -bunny.scale.set(3); -bunny.anchor.set(0.5); -bunny.x = stageWidth / 2; -bunny.y = stageHeight / 2; - -// Add title -const title = new PIXI.Text('Drag the handle to change the scale of bunny.', { - fill: '#272d37', - fontFamily: 'Roboto', - fontSize: 20, - align: 'center', -}); - -title.roundPixels = true; -title.x = stageWidth / 2; -title.y = 40; -title.anchor.set(0.5, 0); -app.stage.addChild(title); - -// Listen to pointermove on stage once handle is pressed. -function onDragStart() -{ - app.stage.eventMode = 'static'; - app.stage.addEventListener('pointermove', onDrag); -} - -// Stop dragging feedback once the handle is released. -function onDragEnd(e) -{ - app.stage.eventMode = 'auto'; - app.stage.removeEventListener('pointermove', onDrag); -} - -// Update the handle's position & bunny's scale when the handle is moved. -function onDrag(e) -{ - const halfHandleWidth = handle.width / 2; - // Set handle y-position to match pointer, clamped to (4, screen.height - 4). - - handle.x = Math.max(halfHandleWidth, Math.min(slider.toLocal(e.global).x, sliderWidth - halfHandleWidth)); - // Normalize handle position between -1 and 1. - const t = 2 * (handle.x / sliderWidth - 0.5); - - bunny.scale.set(3 * (1.1 + t)); -} diff --git a/src/examples/v8.0.0-rc/filtersAdvanced/custom.js b/src/examples/v8.0.0-rc/filtersAdvanced/custom.js deleted file mode 100644 index ba3733dc8..000000000 --- a/src/examples/v8.0.0-rc/filtersAdvanced/custom.js +++ /dev/null @@ -1,47 +0,0 @@ -import * as PIXI from 'pixi.js'; - -const app = new PIXI.Application({ resizeTo: window }); - -document.body.appendChild(app.view); - -// Create background image -const background = PIXI.Sprite.from('https://pixijs.com/assets/bg_grass.jpg'); - -background.width = app.screen.width; -background.height = app.screen.height; -app.stage.addChild(background); - -// Stop application wait for load to finish -app.stop(); - -fetch('https://pixijs.com/assets/pixi-filters/shader.frag') - .then((res) => res.text()) - .then(onLoaded); - -let filter; - -// Handle the load completed -function onLoaded(data) -{ - // Create the new filter, arguments: (vertexShader, framentSource) - filter = new PIXI.Filter(null, data, { - customUniform: 0.0, - }); - - // === WARNING === - // specify uniforms in filter constructor - // or set them BEFORE first use - // filter.uniforms.customUniform = 0.0 - - // Add the filter - background.filters = [filter]; - - // Resume application update - app.start(); -} - -// Animate the filter -app.ticker.add((delta) => -{ - filter.uniforms.customUniform += 0.04 * delta; -}); diff --git a/src/examples/v8.0.0-rc/filtersAdvanced/mouseBlending.js b/src/examples/v8.0.0-rc/filtersAdvanced/mouseBlending.js deleted file mode 100644 index 34b2239d9..000000000 --- a/src/examples/v8.0.0-rc/filtersAdvanced/mouseBlending.js +++ /dev/null @@ -1,58 +0,0 @@ -import * as PIXI from 'pixi.js'; - -/** - * https://github.com/pixijs/pixi.js/wiki/v5-Creating-Filters - */ - -const app = new PIXI.Application({ resizeTo: window }); - -document.body.appendChild(app.view); - -// Create background image -const background = PIXI.Sprite.from('https://pixijs.com/assets/bg_grass.jpg'); - -background.width = app.screen.width; -background.height = app.screen.height; -app.stage.addChild(background); - -// NOTE: this shader wont work on old devices where mediump precision is forced in fragment shader -// because v5 default vertex shader uses `inputSize` in it. Same uniform in fragment and vertex shader -// cant have different precision :( - -const shaderFrag = ` -precision highp float; - -varying vec2 vTextureCoord; - -uniform vec2 mouse; -uniform vec4 inputSize; -uniform vec4 outputFrame; -uniform float time; - -void main() { - vec2 screenPos = vTextureCoord * inputSize.xy + outputFrame.xy; - if (length(mouse - screenPos) < 25.0) { - gl_FragColor = vec4(1.0, 1.0, 0.0, 1.0) * 0.7; //yellow circle, alpha=0.7 - } else { - // blend with underlying image, alpha=0.5 - gl_FragColor = vec4( sin(time), (mouse.xy - outputFrame.xy) / outputFrame.zw, 1.0) * 0.5; - } -} -`; - -const container = new PIXI.Container(); - -container.filterArea = new PIXI.Rectangle(100, 100, app.screen.width - 200, app.screen.height - 200); -app.stage.addChild(container); -const filter = new PIXI.Filter(null, shaderFrag, { - mouse: new PIXI.Point(), -}); - -container.filters = [filter]; - -app.stage.hitArea = app.screen; -app.stage.eventMode = 'static'; -app.stage.on('pointermove', (event) => -{ - filter.uniforms.mouse.copyFrom(event.global); -}); diff --git a/src/examples/v8.0.0-rc/filtersAdvanced/shaderToyFilterRenderTexture.js b/src/examples/v8.0.0-rc/filtersAdvanced/shaderToyFilterRenderTexture.js deleted file mode 100644 index 2e26310a9..000000000 --- a/src/examples/v8.0.0-rc/filtersAdvanced/shaderToyFilterRenderTexture.js +++ /dev/null @@ -1,116 +0,0 @@ -import * as PIXI from 'pixi.js'; - -/** - * Please note that this is not the most optimal way of doing pure shader generated rendering and should be used when the - * scene is wanted as input texture. Check the mesh version of example for more performant version if you need only shader - * generated content. - **/ -const app = new PIXI.Application({ background: '#1099bb', resizeTo: window }); - -document.body.appendChild(app.view); - -PIXI.Assets.load('https://pixijs.com/assets/perlin.jpg').then(onAssetsLoaded); - -let filter = null; - -const text = new PIXI.Text('PixiJS', { fill: 0xffffff, fontSize: 80 }); - -text.anchor.set(0.5, 0.5); -text.position.set(app.renderer.screen.width / 2, app.renderer.screen.height / 2); - -app.stage.addChild(text); - -let totalTime = 0; - -// Fragment shader, in real use this would be much cleaner when loaded from a file -// or embedded into the application as data resource. -const fragment = `//Based on this: https://www.shadertoy.com/view/wtlSWX - -varying vec2 vTextureCoord; -uniform sampler2D uSampler; -uniform sampler2D noise; -uniform float time; -// Distance function. Just calculates the height (z) from x,y plane with really simple length check. -// Its not exact as there could be shorter distances. -vec2 dist(vec3 p) -{ - float id = floor(p.x)+floor(p.y); - id = mod(id, 2.); - float h = texture2D(noise, vec2(p.x, p.y)*0.04).r*5.1; - float h2 = texture2D(uSampler, vTextureCoord).r; - return vec2(h+h2-p.z,id); -} -//Light calculation. -vec3 calclight(vec3 p, vec3 rd) -{ - vec2 eps = vec2( 0., 0.001); - vec3 n = normalize( vec3( - dist(p+eps.yxx).x - dist(p-eps.yxx).x, - dist(p+eps.xyx).x - dist(p-eps.xyx).x, - dist(p+eps.xxy).x - dist(p-eps.xxy).x - )); - - vec3 d = vec3( max( 0., dot( -rd ,n))); - - return d; -} - -void main() -{ - vec2 uv = vec2(vTextureCoord.x, 1.-vTextureCoord.y); - uv *=2.; - uv-=1.; - - vec3 cam = vec3(0.,time -2., -3.); - vec3 target = vec3(sin(time)*0.1, time+cos(time)+2., 0. ); - float fov = 2.2; - vec3 forward = normalize( target - cam); - vec3 up = normalize(cross( forward, vec3(0., 1.,0.))); - vec3 right = normalize( cross( up, forward)); - vec3 raydir = normalize(vec3( uv.x *up + uv.y * right + fov*forward)); - - //Do the raymarch - vec3 col = vec3(0.); - float t = 0.; - for( int i = 0; i < 100; i++) - { - vec3 p = t * raydir + cam; - vec2 d = dist(p); - t+=d.x*0.5;//Jump only half of the distance as height function used is not really the best for heightmaps. - if(d.x < 0.001) - { - vec3 bc = d.y < 0.5 ? vec3(1.0, .8, 0.) : - vec3(0.8,0.0, 1.0); - col = vec3( 1.) * calclight(p, raydir) * (1. - t/150.) *bc; - break; - } - if(t > 1000.) - { - break; - } - } - gl_FragColor = vec4(col, 1.); -} -`; - -function onAssetsLoaded(perlin) -{ - // Add perlin noise for filter, make sure it's wrapping and does not have mipmap. - perlin.baseTexture.wrapMode = PIXI.WRAP_MODES.REPEAT; - perlin.baseTexture.mipmap = false; - - // Build the filter - filter = new PIXI.Filter(null, fragment, { - time: 0.0, - noise: perlin, - }); - app.stage.filterArea = app.renderer.screen; - app.stage.filters = [filter]; - - // Listen for animate update. - app.ticker.add((delta) => - { - filter.uniforms.time = totalTime; - totalTime += delta / 60; - }); -} diff --git a/src/examples/v8.0.0-rc/filtersBasic/blur.js b/src/examples/v8.0.0-rc/filtersBasic/blur.js deleted file mode 100644 index 9557f45bf..000000000 --- a/src/examples/v8.0.0-rc/filtersBasic/blur.js +++ /dev/null @@ -1,42 +0,0 @@ -import * as PIXI from 'pixi.js'; - -const app = new PIXI.Application({ resizeTo: window }); - -document.body.appendChild(app.view); - -const bg = PIXI.Sprite.from('https://pixijs.com/assets/pixi-filters/bg_depth_blur.jpg'); - -bg.width = app.screen.width; -bg.height = app.screen.height; -app.stage.addChild(bg); - -const littleDudes = PIXI.Sprite.from('https://pixijs.com/assets/pixi-filters/depth_blur_dudes.jpg'); - -littleDudes.x = app.screen.width / 2 - 315; -littleDudes.y = 200; -app.stage.addChild(littleDudes); - -const littleRobot = PIXI.Sprite.from('https://pixijs.com/assets/pixi-filters/depth_blur_moby.jpg'); - -littleRobot.x = app.screen.width / 2 - 200; -littleRobot.y = 100; -app.stage.addChild(littleRobot); - -const blurFilter1 = new PIXI.filters.BlurFilter(); -const blurFilter2 = new PIXI.filters.BlurFilter(); - -littleDudes.filters = [blurFilter1]; -littleRobot.filters = [blurFilter2]; - -let count = 0; - -app.ticker.add(() => -{ - count += 0.005; - - const blurAmount = Math.cos(count); - const blurAmount2 = Math.sin(count); - - blurFilter1.blur = 20 * blurAmount; - blurFilter2.blur = 20 * blurAmount2; -}); diff --git a/src/examples/v8.0.0-rc/filtersBasic/colorMatrix.js b/src/examples/v8.0.0-rc/filtersBasic/colorMatrix.js deleted file mode 100644 index 1ef11e814..000000000 --- a/src/examples/v8.0.0-rc/filtersBasic/colorMatrix.js +++ /dev/null @@ -1,90 +0,0 @@ -import * as PIXI from 'pixi.js'; - -const app = new PIXI.Application({ resizeTo: window }); - -document.body.appendChild(app.view); - -app.stage.eventMode = 'static'; - -const bg = PIXI.Sprite.from('https://pixijs.com/assets/bg_rotate.jpg'); - -bg.anchor.set(0.5); - -bg.x = app.screen.width / 2; -bg.y = app.screen.height / 2; - -const filter = new PIXI.filters.ColorMatrixFilter(); - -const container = new PIXI.Container(); - -container.x = app.screen.width / 2; -container.y = app.screen.height / 2; - -const bgFront = PIXI.Sprite.from('https://pixijs.com/assets/bg_scene_rotate.jpg'); - -bgFront.anchor.set(0.5); - -container.addChild(bgFront); - -const light2 = PIXI.Sprite.from('https://pixijs.com/assets/light_rotate_2.png'); - -light2.anchor.set(0.5); -container.addChild(light2); - -const light1 = PIXI.Sprite.from('https://pixijs.com/assets/light_rotate_1.png'); - -light1.anchor.set(0.5); -container.addChild(light1); - -const panda = PIXI.Sprite.from('https://pixijs.com/assets/panda.png'); - -panda.anchor.set(0.5); - -container.addChild(panda); - -app.stage.addChild(container); - -app.stage.filters = [filter]; - -let count = 0; -let enabled = true; - -app.stage.on('pointertap', () => -{ - enabled = !enabled; - app.stage.filters = enabled ? [filter] : null; -}); - -const help = new PIXI.Text('Click or tap to turn filters on / off.', { - fontFamily: 'Arial', - fontSize: 12, - fontWeight: 'bold', - fill: 'white', -}); - -help.y = app.screen.height - 25; -help.x = 10; - -app.stage.addChild(help); - -app.ticker.add((delta) => -{ - bg.rotation += 0.01; - bgFront.rotation -= 0.01; - light1.rotation += 0.02; - light2.rotation += 0.01; - - panda.scale.x = 1 + Math.sin(count) * 0.04; - panda.scale.y = 1 + Math.cos(count) * 0.04; - - count += 0.1; - - const { matrix } = filter; - - matrix[1] = Math.sin(count) * 3; - matrix[2] = Math.cos(count); - matrix[3] = Math.cos(count) * 1.5; - matrix[4] = Math.sin(count / 3) * 2; - matrix[5] = Math.sin(count / 2); - matrix[6] = Math.sin(count / 4); -}); diff --git a/src/examples/v8.0.0-rc/filtersBasic/displacementMapCrawlies.js b/src/examples/v8.0.0-rc/filtersBasic/displacementMapCrawlies.js deleted file mode 100644 index 21b823678..000000000 --- a/src/examples/v8.0.0-rc/filtersBasic/displacementMapCrawlies.js +++ /dev/null @@ -1,111 +0,0 @@ -import * as PIXI from 'pixi.js'; - -const app = new PIXI.Application({ resizeTo: window }); - -document.body.appendChild(app.view); - -app.stage.eventMode = 'static'; - -const container = new PIXI.Container(); - -app.stage.addChild(container); - -const padding = 100; -const bounds = new PIXI.Rectangle(-padding, -padding, app.screen.width + padding * 2, app.screen.height + padding * 2); -const maggots = []; - -for (let i = 0; i < 20; i++) -{ - const maggot = PIXI.Sprite.from('https://pixijs.com/assets/maggot.png'); - - maggot.anchor.set(0.5); - container.addChild(maggot); - - maggot.direction = Math.random() * Math.PI * 2; - maggot.speed = 1; - maggot.turnSpeed = Math.random() - 0.8; - - maggot.x = Math.random() * bounds.width; - maggot.y = Math.random() * bounds.height; - - maggot.scale.set(1 + Math.random() * 0.3); - maggot.original = new PIXI.Point(); - maggot.original.copyFrom(maggot.scale); - maggots.push(maggot); -} - -const displacementSprite = PIXI.Sprite.from('https://pixijs.com/assets/pixi-filters/displace.png'); -const displacementFilter = new PIXI.filters.DisplacementFilter(displacementSprite); - -app.stage.addChild(displacementSprite); - -container.filters = [displacementFilter]; - -displacementFilter.scale.x = 110; -displacementFilter.scale.y = 110; -displacementSprite.anchor.set(0.5); - -const ring = PIXI.Sprite.from('https://pixijs.com/assets/pixi-filters/ring.png'); - -ring.anchor.set(0.5); - -ring.visible = false; - -app.stage.addChild(ring); - -const bg = PIXI.Sprite.from('https://pixijs.com/assets/bg_grass.jpg'); - -bg.width = app.screen.width; -bg.height = app.screen.height; - -bg.alpha = 0.4; - -container.addChild(bg); - -app.stage.on('mousemove', onPointerMove).on('touchmove', onPointerMove); - -function onPointerMove(eventData) -{ - ring.visible = true; - - displacementSprite.position.set(eventData.data.global.x - 25, eventData.data.global.y); - ring.position.copyFrom(displacementSprite.position); -} - -let count = 0; - -app.ticker.add(() => -{ - count += 0.05; - - for (let i = 0; i < maggots.length; i++) - { - const maggot = maggots[i]; - - maggot.direction += maggot.turnSpeed * 0.01; - maggot.x += Math.sin(maggot.direction) * maggot.speed; - maggot.y += Math.cos(maggot.direction) * maggot.speed; - - maggot.rotation = -maggot.direction - Math.PI / 2; - maggot.scale.x = maggot.original.x + Math.sin(count) * 0.2; - - // wrap the maggots around as the crawl - if (maggot.x < bounds.x) - { - maggot.x += bounds.width; - } - else if (maggot.x > bounds.x + bounds.width) - { - maggot.x -= bounds.width; - } - - if (maggot.y < bounds.y) - { - maggot.y += bounds.height; - } - else if (maggot.y > bounds.y + bounds.height) - { - maggot.y -= bounds.height; - } - } -}); diff --git a/src/examples/v8.0.0-rc/filtersBasic/displacementMapFlag.js b/src/examples/v8.0.0-rc/filtersBasic/displacementMapFlag.js deleted file mode 100644 index 0c09bc815..000000000 --- a/src/examples/v8.0.0-rc/filtersBasic/displacementMapFlag.js +++ /dev/null @@ -1,46 +0,0 @@ -import * as PIXI from 'pixi.js'; - -const app = new PIXI.Application({ resizeTo: window }); - -document.body.appendChild(app.view); - -app.stage.eventMode = 'static'; - -const container = new PIXI.Container(); - -app.stage.addChild(container); - -const flag = PIXI.Sprite.from('https://pixijs.com/assets/pixi-filters/flag.png'); - -container.addChild(flag); -flag.x = 100; -flag.y = 100; - -const displacementSprite = PIXI.Sprite.from('https://pixijs.com/assets/pixi-filters/displacement_map_repeat.jpg'); -// Make sure the sprite is wrapping. - -displacementSprite.texture.baseTexture.wrapMode = PIXI.WRAP_MODES.REPEAT; -const displacementFilter = new PIXI.filters.DisplacementFilter(displacementSprite); - -displacementFilter.padding = 10; - -displacementSprite.position = flag.position; - -app.stage.addChild(displacementSprite); - -flag.filters = [displacementFilter]; - -displacementFilter.scale.x = 30; -displacementFilter.scale.y = 60; - -app.ticker.add(() => -{ - // Offset the sprite position to make vFilterCoord update to larger value. - // Repeat wrapping makes sure there's still pixels on the coordinates. - displacementSprite.x++; - // Reset x to 0 when it's over width to keep values from going to very huge numbers. - if (displacementSprite.x > displacementSprite.width) - { - displacementSprite.x = 0; - } -}); diff --git a/src/examples/v8.0.0-rc/graphics/advanced.js b/src/examples/v8.0.0-rc/graphics/advanced.js deleted file mode 100644 index bce095b7f..000000000 --- a/src/examples/v8.0.0-rc/graphics/advanced.js +++ /dev/null @@ -1,105 +0,0 @@ -import * as PIXI from 'pixi.js'; - -const app = new PIXI.Application({ antialias: true, resizeTo: window }); - -document.body.appendChild(app.view); - -const sprite = PIXI.Sprite.from('https://pixijs.com/assets/bg_rotate.jpg'); - -// // BEZIER CURVE //// -// information: https://en.wikipedia.org/wiki/Bézier_curve - -const realPath = new PIXI.Graphics(); - -realPath.lineStyle(2, 0xffffff, 1); -realPath.moveTo(0, 0); -realPath.lineTo(100, 200); -realPath.lineTo(200, 200); -realPath.lineTo(240, 100); - -realPath.position.x = 50; -realPath.position.y = 50; - -app.stage.addChild(realPath); - -const bezier = new PIXI.Graphics(); - -bezier.lineStyle(5, 0xaa0000, 1); -bezier.bezierCurveTo(100, 200, 200, 200, 240, 100); - -bezier.position.x = 50; -bezier.position.y = 50; - -app.stage.addChild(bezier); - -// // BEZIER CURVE 2 //// -const realPath2 = new PIXI.Graphics(); - -realPath2.lineStyle(2, 0xffffff, 1); -realPath2.moveTo(0, 0); -realPath2.lineTo(0, -100); -realPath2.lineTo(150, 150); -realPath2.lineTo(240, 100); - -realPath2.position.x = 320; -realPath2.position.y = 150; - -app.stage.addChild(realPath2); - -const bezier2 = new PIXI.Graphics(); - -bezier2.lineTextureStyle({ width: 10, texture: sprite.texture }); -bezier2.bezierCurveTo(0, -100, 150, 150, 240, 100); - -bezier2.position.x = 320; -bezier2.position.y = 150; - -app.stage.addChild(bezier2); - -// // ARC //// -const arc = new PIXI.Graphics(); - -arc.lineStyle(5, 0xaa00bb, 1); -arc.arc(600, 100, 50, Math.PI, 2 * Math.PI); - -app.stage.addChild(arc); - -// // ARC 2 //// -const arc2 = new PIXI.Graphics(); - -arc2.lineStyle(6, 0x3333dd, 1); -arc2.arc(650, 270, 60, 2 * Math.PI, (3 * Math.PI) / 2); - -app.stage.addChild(arc2); - -// // ARC 3 //// -const arc3 = new PIXI.Graphics(); - -arc3.lineTextureStyle({ width: 20, texture: sprite.texture }); -arc3.arc(650, 420, 60, 2 * Math.PI, (2.5 * Math.PI) / 2); - -app.stage.addChild(arc3); - -// / Hole //// -const rectAndHole = new PIXI.Graphics(); - -rectAndHole.beginFill(0x00ff00); -rectAndHole.drawRect(350, 350, 150, 150); -rectAndHole.beginHole(); -rectAndHole.drawCircle(375, 375, 25); -rectAndHole.drawCircle(425, 425, 25); -rectAndHole.drawCircle(475, 475, 25); -rectAndHole.endHole(); -rectAndHole.endFill(); - -app.stage.addChild(rectAndHole); - -// // Line Texture Style //// -const beatifulRect = new PIXI.Graphics(); - -beatifulRect.lineTextureStyle({ width: 20, texture: sprite.texture }); -beatifulRect.beginFill(0xff0000); -beatifulRect.drawRect(80, 350, 150, 150); -beatifulRect.endFill(); - -app.stage.addChild(beatifulRect); diff --git a/src/examples/v8.0.0-rc/graphics/dynamic.js b/src/examples/v8.0.0-rc/graphics/dynamic.js deleted file mode 100644 index 5db56f8d8..000000000 --- a/src/examples/v8.0.0-rc/graphics/dynamic.js +++ /dev/null @@ -1,98 +0,0 @@ -import * as PIXI from 'pixi.js'; - -const app = new PIXI.Application({ antialias: true, resizeTo: window }); - -document.body.appendChild(app.view); - -app.stage.eventMode = 'static'; -app.stage.hitArea = app.screen; - -const graphics = new PIXI.Graphics(); - -// set a fill and line style -graphics.beginFill(0xff3300); -graphics.lineStyle(10, 0xffd900, 1); - -// draw a shape -graphics.moveTo(50, 50); -graphics.lineTo(250, 50); -graphics.lineTo(100, 100); -graphics.lineTo(250, 220); -graphics.lineTo(50, 220); -graphics.lineTo(50, 50); -graphics.closePath(); -graphics.endFill(); - -// set a fill and line style again -graphics.lineStyle(10, 0xff0000, 0.8); -graphics.beginFill(0xff700b, 1); - -// draw a second shape -graphics.moveTo(210, 300); -graphics.lineTo(450, 320); -graphics.lineTo(570, 350); -graphics.quadraticCurveTo(600, 0, 480, 100); -graphics.lineTo(330, 120); -graphics.lineTo(410, 200); -graphics.lineTo(210, 300); -graphics.closePath(); -graphics.endFill(); - -// draw a rectangle -graphics.lineStyle(2, 0x0000ff, 1); -graphics.drawRect(50, 250, 100, 100); - -// draw a circle -graphics.lineStyle(0); -graphics.beginFill(0xffff0b, 0.5); -graphics.drawCircle(470, 200, 100); -graphics.endFill(); - -graphics.lineStyle(20, 0x33ff00); -graphics.moveTo(30, 30); -graphics.lineTo(600, 300); - -app.stage.addChild(graphics); - -// let's create a moving shape -const thing = new PIXI.Graphics(); - -app.stage.addChild(thing); -thing.x = 800 / 2; -thing.y = 600 / 2; - -let count = 0; - -// Just click on the stage to draw random lines -window.app = app; -app.stage.on('pointerdown', () => -{ - graphics.lineStyle(Math.random() * 30, Math.random() * 0xffffff, 1); - graphics.moveTo(Math.random() * 800, Math.random() * 600); - graphics.bezierCurveTo( - Math.random() * 800, - Math.random() * 600, - Math.random() * 800, - Math.random() * 600, - Math.random() * 800, - Math.random() * 600, - ); -}); - -app.ticker.add(() => -{ - count += 0.1; - - thing.clear(); - thing.lineStyle(10, 0xff0000, 1); - thing.beginFill(0xffff00, 0.5); - - thing.moveTo(-120 + Math.sin(count) * 20, -100 + Math.cos(count) * 20); - thing.lineTo(120 + Math.cos(count) * 20, -100 + Math.sin(count) * 20); - thing.lineTo(120 + Math.sin(count) * 20, 100 + Math.cos(count) * 20); - thing.lineTo(-120 + Math.cos(count) * 20, 100 + Math.sin(count) * 20); - thing.lineTo(-120 + Math.sin(count) * 20, -100 + Math.cos(count) * 20); - thing.closePath(); - - thing.rotation = count * 0.1; -}); diff --git a/src/examples/v8.0.0-rc/graphics/simple.js b/src/examples/v8.0.0-rc/graphics/simple.js deleted file mode 100644 index 735e40f20..000000000 --- a/src/examples/v8.0.0-rc/graphics/simple.js +++ /dev/null @@ -1,99 +0,0 @@ -import * as PIXI from 'pixi.js'; -import '@pixi/graphics-extras'; - -const app = new PIXI.Application({ antialias: true, resizeTo: window }); - -document.body.appendChild(app.view); - -const graphics = new PIXI.Graphics(); - -// Rectangle -graphics.beginFill(0xde3249); -graphics.drawRect(50, 50, 100, 100); -graphics.endFill(); - -// Rectangle + line style 1 -graphics.lineStyle(2, 0xfeeb77, 1); -graphics.beginFill(0x650a5a); -graphics.drawRect(200, 50, 100, 100); -graphics.endFill(); - -// Rectangle + line style 2 -graphics.lineStyle(10, 0xffbd01, 1); -graphics.beginFill(0xc34288); -graphics.drawRect(350, 50, 100, 100); -graphics.endFill(); - -// Rectangle 2 -graphics.lineStyle(2, 0xffffff, 1); -graphics.beginFill(0xaa4f08); -graphics.drawRect(530, 50, 140, 100); -graphics.endFill(); - -// Circle -graphics.lineStyle(0); // draw a circle, set the lineStyle to zero so the circle doesn't have an outline -graphics.beginFill(0xde3249, 1); -graphics.drawCircle(100, 250, 50); -graphics.endFill(); - -// Circle + line style 1 -graphics.lineStyle(2, 0xfeeb77, 1); -graphics.beginFill(0x650a5a, 1); -graphics.drawCircle(250, 250, 50); -graphics.endFill(); - -// Circle + line style 2 -graphics.lineStyle(10, 0xffbd01, 1); -graphics.beginFill(0xc34288, 1); -graphics.drawCircle(400, 250, 50); -graphics.endFill(); - -// Ellipse + line style 2 -graphics.lineStyle(2, 0xffffff, 1); -graphics.beginFill(0xaa4f08, 1); -graphics.drawEllipse(600, 250, 80, 50); -graphics.endFill(); - -// draw a shape -graphics.beginFill(0xff3300); -graphics.lineStyle(4, 0xffd900, 1); -graphics.moveTo(50, 350); -graphics.lineTo(250, 350); -graphics.lineTo(100, 400); -graphics.lineTo(50, 350); -graphics.closePath(); -graphics.endFill(); - -// draw a rounded rectangle -graphics.lineStyle(2, 0xff00ff, 1); -graphics.beginFill(0x650a5a, 0.25); -graphics.drawRoundedRect(50, 440, 100, 100, 16); -graphics.endFill(); - -// draw star -graphics.lineStyle(2, 0xffffff); -graphics.beginFill(0x35cc5a, 1); -graphics.drawStar(360, 370, 5, 50); -graphics.endFill(); - -// draw star 2 -graphics.lineStyle(2, 0xffffff); -graphics.beginFill(0xffcc5a, 1); -graphics.drawStar(280, 510, 7, 50); -graphics.endFill(); - -// draw star 3 -graphics.lineStyle(4, 0xffffff); -graphics.beginFill(0x55335a, 1); -graphics.drawStar(470, 450, 4, 50); -graphics.endFill(); - -// draw polygon -const path = [600, 370, 700, 460, 780, 420, 730, 570, 590, 520]; - -graphics.lineStyle(0); -graphics.beginFill(0x3500fa, 1); -graphics.drawPolygon(path); -graphics.endFill(); - -app.stage.addChild(graphics); diff --git a/src/examples/v8.0.0-rc/masks/filter.js b/src/examples/v8.0.0-rc/masks/filter.js deleted file mode 100644 index 47a2cb7fd..000000000 --- a/src/examples/v8.0.0-rc/masks/filter.js +++ /dev/null @@ -1,42 +0,0 @@ -import * as PIXI from 'pixi.js'; - -const app = new PIXI.Application({ resizeTo: window }); - -document.body.appendChild(app.view); - -// Inner radius of the circle -const radius = 100; - -// The blur amount -const blurSize = 32; - -PIXI.Assets.load('https://pixijs.com/assets/bg_grass.jpg').then((grassTexture) => -{ - const background = new PIXI.Sprite(grassTexture); - - app.stage.addChild(background); - background.width = app.screen.width; - background.height = app.screen.height; - - const circle = new PIXI.Graphics() - .beginFill(0xff0000) - .drawCircle(radius + blurSize, radius + blurSize, radius) - .endFill(); - - circle.filters = [new PIXI.filters.BlurFilter(blurSize)]; - - const bounds = new PIXI.Rectangle(0, 0, (radius + blurSize) * 2, (radius + blurSize) * 2); - const texture = app.renderer.generateTexture(circle, PIXI.SCALE_MODES.NEAREST, 1, bounds); - const focus = new PIXI.Sprite(texture); - - app.stage.addChild(focus); - background.mask = focus; - - app.stage.eventMode = 'static'; - app.stage.hitArea = app.screen; - app.stage.on('pointermove', (event) => - { - focus.position.x = event.global.x - focus.width / 2; - focus.position.y = event.global.y - focus.height / 2; - }); -}); diff --git a/src/examples/v8.0.0-rc/masks/graphics.js b/src/examples/v8.0.0-rc/masks/graphics.js deleted file mode 100644 index 976c3e385..000000000 --- a/src/examples/v8.0.0-rc/masks/graphics.js +++ /dev/null @@ -1,100 +0,0 @@ -import * as PIXI from 'pixi.js'; - -const app = new PIXI.Application({ antialias: true, resizeTo: window }); - -document.body.appendChild(app.view); - -app.stage.eventMode = 'static'; - -const bg = PIXI.Sprite.from('https://pixijs.com/assets/bg_rotate.jpg'); - -bg.anchor.set(0.5); - -bg.x = app.screen.width / 2; -bg.y = app.screen.height / 2; - -app.stage.addChild(bg); - -const container = new PIXI.Container(); - -container.x = app.screen.width / 2; -container.y = app.screen.height / 2; - -// add a bunch of sprites -const bgFront = PIXI.Sprite.from('https://pixijs.com/assets/bg_scene_rotate.jpg'); - -bgFront.anchor.set(0.5); - -const light2 = PIXI.Sprite.from('https://pixijs.com/assets/light_rotate_2.png'); - -light2.anchor.set(0.5); - -const light1 = PIXI.Sprite.from('https://pixijs.com/assets/light_rotate_1.png'); - -light1.anchor.set(0.5); - -const panda = PIXI.Sprite.from('https://pixijs.com/assets/panda.png'); - -panda.anchor.set(0.5); - -container.addChild(bgFront, light2, light1, panda); - -app.stage.addChild(container); - -// let's create a moving shape -const thing = new PIXI.Graphics(); - -app.stage.addChild(thing); -thing.x = app.screen.width / 2; -thing.y = app.screen.height / 2; -thing.lineStyle(0); - -container.mask = thing; - -let count = 0; - -app.stage.on('pointertap', () => -{ - if (!container.mask) - { - container.mask = thing; - } - else - { - container.mask = null; - } -}); - -const help = new PIXI.Text('Click or tap to turn masking on / off.', { - fontFamily: 'Arial', - fontSize: 12, - fontWeight: 'bold', - fill: 'white', -}); - -help.y = app.screen.height - 26; -help.x = 10; -app.stage.addChild(help); - -app.ticker.add(() => -{ - bg.rotation += 0.01; - bgFront.rotation -= 0.01; - - light1.rotation += 0.02; - light2.rotation += 0.01; - - panda.scale.x = 1 + Math.sin(count) * 0.04; - panda.scale.y = 1 + Math.cos(count) * 0.04; - - count += 0.1; - - thing.clear(); - - thing.beginFill(0x8bc5ff, 0.4); - thing.moveTo(-120 + Math.sin(count) * 20, -100 + Math.cos(count) * 20); - thing.lineTo(120 + Math.cos(count) * 20, -100 + Math.sin(count) * 20); - thing.lineTo(120 + Math.sin(count) * 20, 100 + Math.cos(count) * 20); - thing.lineTo(-120 + Math.cos(count) * 20, 100 + Math.sin(count) * 20); - thing.rotation = count * 0.1; -}); diff --git a/src/examples/v8.0.0-rc/masks/sprite.js b/src/examples/v8.0.0-rc/masks/sprite.js deleted file mode 100644 index c30cfead2..000000000 --- a/src/examples/v8.0.0-rc/masks/sprite.js +++ /dev/null @@ -1,46 +0,0 @@ -import * as PIXI from 'pixi.js'; - -const app = new PIXI.Application({ resizeTo: window }); - -document.body.appendChild(app.view); - -app.stage.eventMode = 'static'; - -const bg = PIXI.Sprite.from('https://pixijs.com/assets/bg_plane.jpg'); - -app.stage.addChild(bg); - -const cells = PIXI.Sprite.from('https://pixijs.com/assets/cells.png'); - -cells.scale.set(1.5); - -const mask = PIXI.Sprite.from('https://pixijs.com/assets/flowerTop.png'); - -mask.anchor.set(0.5); -mask.x = 310; -mask.y = 190; - -cells.mask = mask; - -app.stage.addChild(mask, cells); - -const target = new PIXI.Point(); - -reset(); - -function reset() -{ - target.x = Math.floor(Math.random() * 550); - target.y = Math.floor(Math.random() * 300); -} - -app.ticker.add(() => -{ - mask.x += (target.x - mask.x) * 0.1; - mask.y += (target.y - mask.y) * 0.1; - - if (Math.abs(mask.x - target.x) < 1) - { - reset(); - } -}); diff --git a/src/examples/v8.0.0-rc/meshAndShaders/instancedGeometry.js b/src/examples/v8.0.0-rc/meshAndShaders/instancedGeometry.js deleted file mode 100644 index 31b929ddf..000000000 --- a/src/examples/v8.0.0-rc/meshAndShaders/instancedGeometry.js +++ /dev/null @@ -1,76 +0,0 @@ -import * as PIXI from 'pixi.js'; - -const app = new PIXI.Application({ resizeTo: window }); - -document.body.appendChild(app.view); - -const geometry = new PIXI.Geometry().addAttribute('aVPos', [-100, 0, 100, 0, 0, -150]); - -geometry.instanced = true; -geometry.instanceCount = 5; - -const positionSize = 2; -const colorSize = 3; -const buffer = new PIXI.Buffer(new Float32Array(geometry.instanceCount * (positionSize + colorSize))); - -geometry.addAttribute('aIPos', buffer, positionSize, false, PIXI.TYPES.FLOAT, 4 * (positionSize + colorSize), 0, true); -geometry.addAttribute( - 'aICol', - buffer, - colorSize, - false, - PIXI.TYPES.FLOAT, - 4 * (positionSize + colorSize), - 4 * positionSize, - true, -); - -for (let i = 0; i < geometry.instanceCount; i++) -{ - const instanceOffset = i * (positionSize + colorSize); - - buffer.data[instanceOffset + 0] = i * 80; - buffer.data[instanceOffset + 2] = Math.random(); - buffer.data[instanceOffset + 3] = Math.random(); - buffer.data[instanceOffset + 4] = Math.random(); -} - -const shader = PIXI.Shader.from( - ` - precision mediump float; - attribute vec2 aVPos; - attribute vec2 aIPos; - attribute vec3 aICol; - - uniform mat3 translationMatrix; - uniform mat3 projectionMatrix; - - varying vec3 vCol; - - void main() { - vCol = aICol; - - gl_Position = vec4((projectionMatrix * translationMatrix * vec3(aVPos + aIPos, 1.0)).xy, 0.0, 1.0); - }`, - - `precision mediump float; - - varying vec3 vCol; - - void main() { - gl_FragColor = vec4(vCol, 1.0); - } - -`, -); - -const triangles = new PIXI.Mesh(geometry, shader); - -triangles.position.set(400, 300); - -app.stage.addChild(triangles); - -app.ticker.add((delta) => -{ - triangles.rotation += 0.01; -}); diff --git a/src/examples/v8.0.0-rc/meshAndShaders/interleavingGeometry.js b/src/examples/v8.0.0-rc/meshAndShaders/interleavingGeometry.js deleted file mode 100644 index a8538c756..000000000 --- a/src/examples/v8.0.0-rc/meshAndShaders/interleavingGeometry.js +++ /dev/null @@ -1,86 +0,0 @@ -import * as PIXI from 'pixi.js'; - -const app = new PIXI.Application({ resizeTo: window }); - -document.body.appendChild(app.view); - -const geometry = new PIXI.Geometry() - .addAttribute( - 'aVertexPosition', // the attribute name - [ - -100, - -100, // x, y - 100, - -100, // x, y - 100, - 100, - -100, - 100, - ], // x, y - 2, - ) // the size of the attribute - .addAttribute( - 'aUvs', // the attribute name - [ - 0, - 0, // u, v - 1, - 0, // u, v - 1, - 1, - 0, - 1, - ], // u, v - 2, - ) // the size of the attribute - .addIndex([0, 1, 2, 0, 2, 3]) - .interleave(); - -const shader = PIXI.Shader.from( - ` - - precision mediump float; - - attribute vec2 aVertexPosition; - attribute vec2 aUvs; - - uniform mat3 translationMatrix; - uniform mat3 projectionMatrix; - - varying vec2 vUvs; - - void main() { - - vUvs = aUvs; - gl_Position = vec4((projectionMatrix * translationMatrix * vec3(aVertexPosition, 1.0)).xy, 0.0, 1.0); - - }`, - - `precision mediump float; - - varying vec2 vUvs; - - uniform sampler2D uSampler2; - - void main() { - - gl_FragColor = texture2D(uSampler2, vUvs ); - } - -`, - { - uSampler2: PIXI.Texture.from('https://pixijs.com/assets/bg_scene_rotate.jpg'), - }, -); - -const quad = new PIXI.Mesh(geometry, shader); - -quad.position.set(400, 300); -quad.scale.set(2); - -app.stage.addChild(quad); - -app.ticker.add((delta) => -{ - quad.rotation += 0.01; -}); diff --git a/src/examples/v8.0.0-rc/meshAndShaders/mergingGeometry.js b/src/examples/v8.0.0-rc/meshAndShaders/mergingGeometry.js deleted file mode 100644 index 31e78cdf6..000000000 --- a/src/examples/v8.0.0-rc/meshAndShaders/mergingGeometry.js +++ /dev/null @@ -1,114 +0,0 @@ -import * as PIXI from 'pixi.js'; - -const app = new PIXI.Application({ resizeTo: window }); - -document.body.appendChild(app.view); - -const geometry = new PIXI.Geometry() - .addAttribute( - 'aVertexPosition', // the attribute name - [ - -100, - -100, // x, y - 100, - -100, // x, y - 100, - 100, - -100, - 100, - ], // x, y - 2, - ) // the size of the attribute - .addAttribute( - 'aUvs', // the attribute name - [ - 0, - 0, // u, v - 1, - 0, // u, v - 1, - 1, - 0, - 1, - ], // u, v - 2, - ) // the size of the attribute - .addIndex([0, 1, 2, 0, 2, 3]); - -const geometry2 = new PIXI.Geometry() - .addAttribute( - 'aVertexPosition', // the attribute name - [ - -100 + 100, - -100, // x, y - 100 + 100, - -100, // x, y - 100 + 100, - 100, - ], // x, y - 2, - ) // the size of the attribute - .addAttribute( - 'aUvs', // the attribute name - [ - 0, - 0, // u, v - 1, - 0, // u, v - 1, - 1, - ], // u, v - 2, - ) // the size of the attribute - .addIndex([0, 1, 2]); - -const geometry3 = PIXI.Geometry.merge([geometry, geometry2]); - -const shader = PIXI.Shader.from( - ` - - precision mediump float; - - attribute vec2 aVertexPosition; - attribute vec2 aUvs; - - uniform mat3 translationMatrix; - uniform mat3 projectionMatrix; - - varying vec2 vUvs; - - void main() { - - vUvs = aUvs; - gl_Position = vec4((projectionMatrix * translationMatrix * vec3(aVertexPosition, 1.0)).xy, 0.0, 1.0); - - }`, - - `precision mediump float; - - varying vec2 vUvs; - - uniform sampler2D uSampler2; - - void main() { - - gl_FragColor = texture2D(uSampler2, vUvs ); - } - -`, - { - uSampler2: PIXI.Texture.from('https://pixijs.com/assets/bg_scene_rotate.jpg'), - }, -); - -const quad = new PIXI.Mesh(geometry3, shader); - -quad.position.set(400, 300); -quad.scale.set(2); - -app.stage.addChild(quad); - -app.ticker.add((delta) => -{ - quad.rotation += 0.01; -}); diff --git a/src/examples/v8.0.0-rc/meshAndShaders/multiPassShaderGeneratedMesh.js b/src/examples/v8.0.0-rc/meshAndShaders/multiPassShaderGeneratedMesh.js deleted file mode 100644 index 1375ca5cb..000000000 --- a/src/examples/v8.0.0-rc/meshAndShaders/multiPassShaderGeneratedMesh.js +++ /dev/null @@ -1,235 +0,0 @@ -import * as PIXI from 'pixi.js'; - -const app = new PIXI.Application({ height: 640, resizeTo: window }); - -document.body.appendChild(app.view); - -// Build geometry. -const geometry = new PIXI.Geometry() - .addAttribute( - 'aVertexPosition', // the attribute name - [ - 0, - 0, // x, y - 200, - 0, // x, y - 200, - 200, - 0, - 200, - ], // x, y - 2, - ) // the size of the attribute - .addAttribute( - 'aUvs', // the attribute name - [ - 0, - 0, // u, v - 1, - 0, // u, v - 1, - 1, - 0, - 1, - ], // u, v - 2, - ) // the size of the attribute - .addIndex([0, 1, 2, 0, 2, 3]); - -// Vertex shader. Use same shader for all passes. -const vertexSrc = ` - - precision mediump float; - - attribute vec2 aVertexPosition; - attribute vec2 aUvs; - - uniform mat3 translationMatrix; - uniform mat3 projectionMatrix; - - varying vec2 vUvs; - - void main() { - - vUvs = aUvs; - gl_Position = vec4((projectionMatrix * translationMatrix * vec3(aVertexPosition, 1.0)).xy, 0.0, 1.0); - - }`; - -// Load a perlinnoise texture for one of the shaders. -const perlinTexture = PIXI.Texture.from('https://pixijs.com/assets/perlin.jpg'); - -// First pass, generates a grid. -const fragmentGridSrc = ` -precision mediump float; -varying vec2 vUvs; -uniform float zoom; - -void main() -{ - //Generate a simple grid. - //Offset uv so that center is 0,0 and edges are -1,1 - vec2 uv = (vUvs-vec2(0.5))*2.0; - vec2 gUv = floor(uv*zoom); - vec4 color1 = vec4(0.8, 0.8, 0.8, 1.0); - vec4 color2 = vec4(0.4, 0.4, 0.4, 1.0); - vec4 outColor = mod(gUv.x + gUv.y, 2.) < 0.5 ? color1 : color2; - gl_FragColor = outColor; - -}`; - -const gridUniforms = { - zoom: 10, -}; -const gridShader = PIXI.Shader.from(vertexSrc, fragmentGridSrc, gridUniforms); -// Sharing textures and meshes is possible. -// But for simplicity each pass has its own output texture and mesh in this example. -const gridTexture = PIXI.RenderTexture.create({ width: 200, height: 200 }); -const gridQuad = new PIXI.Mesh(geometry, gridShader); -const gridContainer = new PIXI.Container(); - -gridContainer.addChild(gridQuad); - -// Second pass. Takes grid as input and makes it ripple. -const fragmentRippleSrc = ` -precision mediump float; -varying vec2 vUvs; -uniform float amount; -uniform float phase; -uniform sampler2D texIn; - -void main() -{ - //Generate a simple grid. - vec2 uv = vUvs; - //Calculate distance from center - float distance = length( uv - vec2(0.5)); - vec4 color = texture2D(texIn, uv); - color.rgb *= sin(distance*25.0+phase) * amount+1.; - gl_FragColor = color; -}`; -const rippleUniforms = { - amount: 0.5, - phase: 0, - texIn: gridTexture, -}; -const rippleShader = PIXI.Shader.from(vertexSrc, fragmentRippleSrc, rippleUniforms); -const rippleTexture = PIXI.RenderTexture.create({ width: 200, height: 200 }); -const rippleQuad = new PIXI.Mesh(geometry, rippleShader); -const rippleContainer = new PIXI.Container(); - -rippleContainer.addChild(rippleQuad); - -// Second effect. Generates a filtered noise. -const fragmentNoiseSrc = ` -precision mediump float; -varying vec2 vUvs; -uniform float limit; -uniform sampler2D noise; - -void main() -{ - float color = texture2D(noise, vUvs).r; - color = step(limit, color); - gl_FragColor = vec4(color); -}`; -const noiseUniforms = { - limit: 0.5, - noise: perlinTexture, -}; -const noiseShader = PIXI.Shader.from(vertexSrc, fragmentNoiseSrc, noiseUniforms); -const noiseTexture = PIXI.RenderTexture.create({ width: 200, height: 200 }); -const noiseQuad = new PIXI.Mesh(geometry, noiseShader); -const noiseContainer = new PIXI.Container(); - -noiseContainer.addChild(noiseQuad); - -// Third effect -const fragmentWaveSrc = ` -precision mediump float; -varying vec2 vUvs; -uniform float amplitude; -uniform float time; - -void main() -{ - //Offset uv so that center is 0,0 and edges are -1,1 - vec2 uv = (vUvs-vec2(0.5))*2.0; - - vec3 outColor = vec3(0.); - - //Simple wavefunctions inversed and with small offsets. - outColor += 5./length(uv.y*200. - 50.0*sin( uv.x*0.25+ time*0.25)*amplitude); - outColor += 4./length(uv.y*300. - 100.0*sin(uv.x*0.5+time*0.5)*amplitude*1.2); - outColor += 3./length(uv.y*400. - 150.0*sin(uv.x*0.75+time*0.75)*amplitude*1.4); - outColor += 2./length(uv.y*500. - 200.0*sin(uv.x+time)*amplitude*1.6); - - gl_FragColor = vec4(outColor,1.0); -}`; -const waveUniforms = { - amplitude: 0.75, - time: 0, -}; -const waveShader = PIXI.Shader.from(vertexSrc, fragmentWaveSrc, waveUniforms); -const waveTexture = PIXI.RenderTexture.create({ width: 200, height: 200 }); -const waveQuad = new PIXI.Mesh(geometry, waveShader); -const waveContainer = new PIXI.Container(); - -waveContainer.addChild(waveQuad); - -// Final combination pass -const fragmentCombineSrc = ` -precision mediump float; -varying vec2 vUvs; - -uniform sampler2D texRipple; -uniform sampler2D texNoise; -uniform sampler2D texWave; - -void main() -{ - //Read color from all - vec4 ripple = texture2D(texRipple, vUvs); - vec4 noise = texture2D(texNoise, vUvs); - vec4 wave = texture2D(texWave, vUvs); - - gl_FragColor = mix(ripple, wave,noise.r); -}`; -const combineUniforms = { - texRipple: rippleTexture, - texNoise: noiseTexture, - texWave: waveTexture, -}; -const combineShader = PIXI.Shader.from(vertexSrc, fragmentCombineSrc, combineUniforms); -const combineQuad = new PIXI.Mesh(geometry, combineShader); - -gridContainer.position.set(10, 10); -rippleContainer.position.set(220, 10); -noiseContainer.position.set(10, 220); -waveContainer.position.set(10, 430); -combineQuad.position.set(430, 220); - -// Add all phases to stage so all the phases can be seen separately. -app.stage.addChild(gridContainer); -app.stage.addChild(rippleContainer); -app.stage.addChild(noiseContainer); -app.stage.addChild(waveContainer); -app.stage.addChild(combineQuad); - -// start the animation.. -let time = 0; - -app.ticker.add((delta) => -{ - time += 1 / 60; - // gridQuad.shader.uniforms.zoom = Math.sin(time)*5+10; - rippleQuad.shader.uniforms.phase = -time; - waveQuad.shader.uniforms.time = time; - noiseQuad.shader.uniforms.limit = Math.sin(time * 0.5) * 0.35 + 0.5; - - // Render the passes to get textures. - app.renderer.render(gridQuad, { renderTexture: gridTexture }); - app.renderer.render(rippleQuad, { renderTexture: rippleTexture }); - app.renderer.render(noiseQuad, { renderTexture: noiseTexture }); - app.renderer.render(waveQuad, { renderTexture: waveTexture }); -}); diff --git a/src/examples/v8.0.0-rc/meshAndShaders/shaderToyMesh.js b/src/examples/v8.0.0-rc/meshAndShaders/shaderToyMesh.js deleted file mode 100644 index cc078d525..000000000 --- a/src/examples/v8.0.0-rc/meshAndShaders/shaderToyMesh.js +++ /dev/null @@ -1,155 +0,0 @@ -import * as PIXI from 'pixi.js'; - -const app = new PIXI.Application({ resizeTo: window }); - -document.body.appendChild(app.view); - -// Build geometry. -const geometry = new PIXI.Geometry() - .addAttribute( - 'aVertexPosition', // the attribute name - [ - -100, - -100, // x, y - 100, - -100, // x, y - 100, - 100, - -100, - 100, - ], // x, y - 2, - ) // the size of the attribute - .addAttribute( - 'aUvs', // the attribute name - [ - 0, - 0, // u, v - 1, - 0, // u, v - 1, - 1, - 0, - 1, - ], // u, v - 2, - ) // the size of the attribute - .addIndex([0, 1, 2, 0, 2, 3]); - -const vertexSrc = ` - - precision mediump float; - - attribute vec2 aVertexPosition; - attribute vec2 aUvs; - - uniform mat3 translationMatrix; - uniform mat3 projectionMatrix; - - varying vec2 vUvs; - - void main() { - - vUvs = aUvs; - gl_Position = vec4((projectionMatrix * translationMatrix * vec3(aVertexPosition, 1.0)).xy, 0.0, 1.0); - - }`; - -const fragmentSrc = ` -//Based on this: https://www.shadertoy.com/view/wtlSWX -precision mediump float; - -varying vec2 vUvs; - -uniform sampler2D noise; -uniform float time; - -// Distance function. Just calculates the height (z) from x,y plane with really simple length check. -// Its not exact as there could be shorter distances. -vec2 dist(vec3 p) -{ - float id = floor(p.x)+floor(p.y); - id = mod(id, 2.); - float h = texture2D(noise, vec2(p.x, p.y)*0.04).r*5.1; - return vec2(h-p.z,id); -} - -//Light calculation. -vec3 calclight(vec3 p, vec3 rd) -{ - vec2 eps = vec2( 0., 0.001); - vec3 n = normalize( vec3( - dist(p+eps.yxx).x - dist(p-eps.yxx).x, - dist(p+eps.xyx).x - dist(p-eps.xyx).x, - dist(p+eps.xxy).x - dist(p-eps.xxy).x - )); - - vec3 d = vec3( max( 0., dot( -rd ,n))); - - return d; -} - -void main() -{ - vec2 uv = vec2(vUvs.x,1.-vUvs.y); - uv *=2.; - uv-=1.; - - vec3 cam = vec3(0.,time -2., -3.); - vec3 target = vec3(sin(time)*0.1, time+cos(time)+2., 0. ); - float fov = 2.2; - vec3 forward = normalize( target - cam); - vec3 up = normalize(cross( forward, vec3(0., 1.,0.))); - vec3 right = normalize( cross( up, forward)); - vec3 raydir = normalize(vec3( uv.x *up + uv.y * right + fov*forward)); - - //Do the raymarch - vec3 col = vec3(0.); - float t = 0.; - for( int i = 0; i < 100; i++) - { - vec3 p = t * raydir + cam; - vec2 d = dist(p); - t+=d.x*0.5;//Jump only half of the distance as height function used is not really the best for heightmaps. - if(d.x < 0.001) - { - vec3 bc = d.y < 0.5 ? vec3(1.0, .8, 0.) : - vec3(0.8,0.0, 1.0); - col = vec3( 1.) * calclight(p, raydir) * (1. - t/150.) *bc; - break; - } - if(t > 1000.) - { - break; - } - } - gl_FragColor = vec4(col, 1.); -}`; - -const uniforms = { - noise: PIXI.Texture.from('https://pixijs.com/assets/perlin.jpg'), - time: 0, -}; -// Make sure repeat wrap is used and no mipmapping. - -uniforms.noise.baseTexture.wrapMode = PIXI.WRAP_MODES.REPEAT; -uniforms.noise.baseTexture.mipmap = false; - -// Build the shader and the quad. -const shader = PIXI.Shader.from(vertexSrc, fragmentSrc, uniforms); -const quad = new PIXI.Mesh(geometry, shader); - -quad.position.set(400, 300); -quad.scale.set(2); - -app.stage.addChild(quad); - -// start the animation.. -let time = 0; - -app.ticker.add((delta) => -{ - time += 1 / 60; - quad.shader.uniforms.time = time; - quad.scale.set(Number(Math.cos(time)) + 2, Number(Math.sin(time * 0.7)) + 2); -}); diff --git a/src/examples/v8.0.0-rc/meshAndShaders/sharedShader.js b/src/examples/v8.0.0-rc/meshAndShaders/sharedShader.js deleted file mode 100644 index 66a18fa55..000000000 --- a/src/examples/v8.0.0-rc/meshAndShaders/sharedShader.js +++ /dev/null @@ -1,124 +0,0 @@ -import * as PIXI from 'pixi.js'; - -const app = new PIXI.Application({ resizeTo: window }); - -document.body.appendChild(app.view); - -const geometry = new PIXI.Geometry() - .addAttribute( - 'aVertexPosition', // the attribute name - [ - -100, - -100, // x, y - 100, - -100, // x, y - 100, - 100, - ], - ) // x, y - - .addAttribute( - 'aUvs', // the attribute name - [ - 0, - 0, // u, v - 1, - 0, // u, v - 1, - 1, - ], - ); // u, v - -const shader = PIXI.Shader.from( - ` - - precision mediump float; - - attribute vec2 aVertexPosition; - attribute vec2 aUvs; - - uniform mat3 translationMatrix; - uniform mat3 projectionMatrix; - - varying vec2 vUvs; - - void main() { - - vUvs = aUvs; - gl_Position = vec4((projectionMatrix * translationMatrix * vec3(aVertexPosition, 1.0)).xy, 0.0, 1.0); - - }`, - - `precision mediump float; - - varying vec2 vUvs; - - uniform sampler2D uSampler2; - - void main() { - - gl_FragColor = texture2D(uSampler2, vUvs); - } - -`, - { - uSampler2: PIXI.Texture.from('https://pixijs.com/assets/bg_scene_rotate.jpg'), - }, -); - -const shader2 = PIXI.Shader.from( - ` - - precision mediump float; - - attribute vec2 aVertexPosition; - attribute vec2 aUvs; - - uniform mat3 translationMatrix; - uniform mat3 projectionMatrix; - - varying vec2 vUvs; - - void main() { - - vUvs = aUvs; - gl_Position = vec4((projectionMatrix * translationMatrix * vec3(aVertexPosition, 1.0)).xy, 0.0, 1.0); - - }`, - - `precision mediump float; - - varying vec2 vUvs; - - uniform sampler2D uSampler2; - - void main() { - - gl_FragColor = texture2D(uSampler2, vUvs); - gl_FragColor.r += (abs(sin(gl_FragCoord.x * 0.06)) * 0.5) * 2.; - gl_FragColor.g += (abs(cos(gl_FragCoord.y * 0.06)) * 0.5) * 2.; - } - -`, - { - uSampler2: PIXI.Texture.from('https://pixijs.com/assets/bg_scene_rotate.jpg'), - }, -); - -const triangle = new PIXI.Mesh(geometry, shader); - -const triangle2 = new PIXI.Mesh(geometry, shader2); - -triangle.position.set(400, 300); -triangle.scale.set(2); - -triangle2.position.set(500, 400); -triangle2.scale.set(3); - -app.stage.addChild(triangle2, triangle); - -app.ticker.add((delta) => -{ - triangle.rotation += 0.01; - triangle2.rotation -= 0.005; -}); diff --git a/src/examples/v8.0.0-rc/meshAndShaders/sharingGeometry.js b/src/examples/v8.0.0-rc/meshAndShaders/sharingGeometry.js deleted file mode 100644 index b53923573..000000000 --- a/src/examples/v8.0.0-rc/meshAndShaders/sharingGeometry.js +++ /dev/null @@ -1,104 +0,0 @@ -import * as PIXI from 'pixi.js'; - -const app = new PIXI.Application({ resizeTo: window }); - -document.body.appendChild(app.view); - -const geometry = new PIXI.Geometry() - .addAttribute( - 'aVertexPosition', // the attribute name - [ - -100, - -100, // x, y - 100, - -100, // x, y - 100, - 100, - ], // x, y - 2, - ) // the size of the attribute - - .addAttribute( - 'aUvs', // the attribute name - [ - 0, - 0, // u, v - 1, - 0, // u, v - 1, - 1, - ], // u, v - 2, - ); // the size of the attribute - -const program = PIXI.Program.from( - ` - - precision mediump float; - - attribute vec2 aVertexPosition; - attribute vec2 aUvs; - - uniform mat3 translationMatrix; - uniform mat3 projectionMatrix; - - varying vec2 vUvs; - - void main() { - - vUvs = aUvs; - gl_Position = vec4((projectionMatrix * translationMatrix * vec3(aVertexPosition, 1.0)).xy, 0.0, 1.0); - - }`, - - `precision mediump float; - - varying vec2 vUvs; - - uniform sampler2D uSamplerTexture; - - void main() { - - gl_FragColor = texture2D(uSamplerTexture, vUvs); - } - -`, -); - -const triangle = new PIXI.Mesh( - geometry, - new PIXI.Shader(program, { - uSamplerTexture: PIXI.Texture.from('https://pixijs.com/assets/bg_scene_rotate.jpg'), - }), -); - -const triangle2 = new PIXI.Mesh( - geometry, - new PIXI.Shader(program, { - uSamplerTexture: PIXI.Texture.from('https://pixijs.com/assets/bg_rotate.jpg'), - }), -); - -const triangle3 = new PIXI.Mesh( - geometry, - new PIXI.Shader(program, { - uSamplerTexture: PIXI.Texture.from('https://pixijs.com/assets/bg_displacement.jpg'), - }), -); - -triangle.position.set(400, 300); -triangle.scale.set(2); - -triangle2.position.set(200, 100); - -triangle3.position.set(500, 400); -triangle3.scale.set(3); - -app.stage.addChild(triangle3, triangle2, triangle); - -app.ticker.add((delta) => -{ - triangle.rotation += 0.01; - triangle2.rotation -= 0.01; - triangle3.rotation -= 0.005; -}); diff --git a/src/examples/v8.0.0-rc/meshAndShaders/texturedMeshAdvanced.js b/src/examples/v8.0.0-rc/meshAndShaders/texturedMeshAdvanced.js deleted file mode 100644 index 9b4c60c08..000000000 --- a/src/examples/v8.0.0-rc/meshAndShaders/texturedMeshAdvanced.js +++ /dev/null @@ -1,64 +0,0 @@ -import * as PIXI from 'pixi.js'; - -const app = new PIXI.Application({ resizeTo: window }); - -document.body.appendChild(app.view); - -let count = 0; - -// build a rope! -const ropeLength = 45; - -const points = []; - -for (let i = 0; i < 25; i++) -{ - points.push(new PIXI.Point(i * ropeLength, 0)); -} - -const strip = new PIXI.SimpleRope(PIXI.Texture.from('https://pixijs.com/assets/snake.png'), points); - -strip.x = -40; -strip.y = 300; - -app.stage.addChild(strip); - -const g = new PIXI.Graphics(); - -g.x = strip.x; -g.y = strip.y; -app.stage.addChild(g); - -// start animating -app.ticker.add(() => -{ - count += 0.1; - - // make the snake - for (let i = 0; i < points.length; i++) - { - points[i].y = Math.sin(i * 0.5 + count) * 30; - points[i].x = i * ropeLength + Math.cos(i * 0.3 + count) * 20; - } - renderPoints(); -}); - -function renderPoints() -{ - g.clear(); - - g.lineStyle(2, 0xffc2c2); - g.moveTo(points[0].x, points[0].y); - - for (let i = 1; i < points.length; i++) - { - g.lineTo(points[i].x, points[i].y); - } - - for (let i = 1; i < points.length; i++) - { - g.beginFill(0xff0022); - g.drawCircle(points[i].x, points[i].y, 10); - g.endFill(); - } -} diff --git a/src/examples/v8.0.0-rc/meshAndShaders/texturedMeshBasic.js b/src/examples/v8.0.0-rc/meshAndShaders/texturedMeshBasic.js deleted file mode 100644 index c8f01a788..000000000 --- a/src/examples/v8.0.0-rc/meshAndShaders/texturedMeshBasic.js +++ /dev/null @@ -1,43 +0,0 @@ -import * as PIXI from 'pixi.js'; - -const app = new PIXI.Application({ resizeTo: window }); - -document.body.appendChild(app.view); - -let count = 0; - -// build a rope! -const ropeLength = 918 / 20; - -const points = []; - -for (let i = 0; i < 20; i++) -{ - points.push(new PIXI.Point(i * ropeLength, 0)); -} - -const strip = new PIXI.SimpleRope(PIXI.Texture.from('https://pixijs.com/assets/snake.png'), points); - -strip.x = -459; - -const snakeContainer = new PIXI.Container(); - -snakeContainer.x = 400; -snakeContainer.y = 300; - -snakeContainer.scale.set(800 / 1100); -app.stage.addChild(snakeContainer); - -snakeContainer.addChild(strip); - -app.ticker.add(() => -{ - count += 0.1; - - // make the snake - for (let i = 0; i < points.length; i++) - { - points[i].y = Math.sin(i * 0.5 + count) * 30; - points[i].x = i * ropeLength + Math.cos(i * 0.3 + count) * 20; - } -}); diff --git a/src/examples/v8.0.0-rc/meshAndShaders/triangle.js b/src/examples/v8.0.0-rc/meshAndShaders/triangle.js deleted file mode 100644 index 67a43059f..000000000 --- a/src/examples/v8.0.0-rc/meshAndShaders/triangle.js +++ /dev/null @@ -1,40 +0,0 @@ -import * as PIXI from 'pixi.js'; - -const app = new PIXI.Application({ resizeTo: window }); - -document.body.appendChild(app.view); - -const geometry = new PIXI.Geometry().addAttribute('aVertexPosition', [-100, -50, 100, -50, 0, 100]); - -const shader = PIXI.Shader.from( - ` - - precision mediump float; - attribute vec2 aVertexPosition; - - uniform mat3 translationMatrix; - uniform mat3 projectionMatrix; - - void main() { - gl_Position = vec4((projectionMatrix * translationMatrix * vec3(aVertexPosition, 1.0)).xy, 0.0, 1.0); - }`, - - `precision mediump float; - - void main() { - gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0); - } - -`, -); - -const triangle = new PIXI.Mesh(geometry, shader); - -triangle.position.set(400, 300); - -app.stage.addChild(triangle); - -app.ticker.add((delta) => -{ - triangle.rotation += 0.01; -}); diff --git a/src/examples/v8.0.0-rc/meshAndShaders/triangleColor.js b/src/examples/v8.0.0-rc/meshAndShaders/triangleColor.js deleted file mode 100644 index 92ca929db..000000000 --- a/src/examples/v8.0.0-rc/meshAndShaders/triangleColor.js +++ /dev/null @@ -1,77 +0,0 @@ -import * as PIXI from 'pixi.js'; - -const app = new PIXI.Application({ resizeTo: window }); - -document.body.appendChild(app.view); - -const geometry = new PIXI.Geometry() - .addAttribute( - 'aVertexPosition', // the attribute name - [ - -100, - -50, // x, y - 100, - -50, // x, y - 0.0, - 100.0, - ], // x, y - 2, - ) // the size of the attribute - - .addAttribute( - 'aColor', // the attribute name - [ - 1, - 0, - 0, // r, g, b - 0, - 1, - 0, // r, g, b - 0, - 0, - 1, - ], // r, g, b - 3, - ); // the size of the attribute - -const shader = PIXI.Shader.from( - ` - - precision mediump float; - attribute vec2 aVertexPosition; - attribute vec3 aColor; - - uniform mat3 translationMatrix; - uniform mat3 projectionMatrix; - - varying vec3 vColor; - - void main() { - - vColor = aColor; - gl_Position = vec4((projectionMatrix * translationMatrix * vec3(aVertexPosition, 1.0)).xy, 0.0, 1.0); - - }`, - - `precision mediump float; - - varying vec3 vColor; - - void main() { - gl_FragColor = vec4(vColor, 1.0); - } - -`, -); - -const triangle = new PIXI.Mesh(geometry, shader); - -triangle.position.set(400, 300); -triangle.scale.set(2); - -app.stage.addChild(triangle); - -app.ticker.add((delta) => -{ - triangle.rotation += 0.01; -}); diff --git a/src/examples/v8.0.0-rc/meshAndShaders/triangleTextured.js b/src/examples/v8.0.0-rc/meshAndShaders/triangleTextured.js deleted file mode 100644 index 91c7c31ec..000000000 --- a/src/examples/v8.0.0-rc/meshAndShaders/triangleTextured.js +++ /dev/null @@ -1,100 +0,0 @@ -import * as PIXI from 'pixi.js'; - -const app = new PIXI.Application({ resizeTo: window }); - -document.body.appendChild(app.view); - -const geometry = new PIXI.Geometry() - .addAttribute( - 'aVertexPosition', // the attribute name - [ - -100, - -100, // x, y - 100, - -100, // x, y - 100, - 100, - ], // x, y - 2, - ) // the size of the attribute - - .addAttribute( - 'aColor', // the attribute name - [ - 1, - 0, - 0, // r, g, b - 0, - 1, - 0, // r, g, b - 0, - 0, - 1, - ], // r, g, b - 3, - ) // the size of the attribute - - .addAttribute( - 'aUvs', // the attribute name - [ - 0, - 0, // u, v - 1, - 0, // u, v - 1, - 1, - ], // u, v - 2, - ); // the size of the attribute - -const vertexSrc = ` - - precision mediump float; - - attribute vec2 aVertexPosition; - attribute vec3 aColor; - attribute vec2 aUvs; - - uniform mat3 translationMatrix; - uniform mat3 projectionMatrix; - - varying vec2 vUvs; - varying vec3 vColor; - - void main() { - - vUvs = aUvs; - vColor = aColor; - gl_Position = vec4((projectionMatrix * translationMatrix * vec3(aVertexPosition, 1.0)).xy, 0.0, 1.0); - - }`; - -const fragmentSrc = ` - - precision mediump float; - - varying vec3 vColor; - varying vec2 vUvs; - - uniform sampler2D uSampler2; - - void main() { - - gl_FragColor = texture2D(uSampler2, vUvs) * vec4(vColor, 1.0); - }`; - -const uniforms = { uSampler2: PIXI.Texture.from('https://pixijs.com/assets/bg_scene_rotate.jpg') }; - -const shader = PIXI.Shader.from(vertexSrc, fragmentSrc, uniforms); - -const triangle = new PIXI.Mesh(geometry, shader); - -triangle.position.set(400, 300); -triangle.scale.set(2); - -app.stage.addChild(triangle); - -app.ticker.add((delta) => -{ - triangle.rotation += 0.01; -}); diff --git a/src/examples/v8.0.0-rc/meshAndShaders/uniforms.js b/src/examples/v8.0.0-rc/meshAndShaders/uniforms.js deleted file mode 100644 index b057916c3..000000000 --- a/src/examples/v8.0.0-rc/meshAndShaders/uniforms.js +++ /dev/null @@ -1,92 +0,0 @@ -import * as PIXI from 'pixi.js'; - -const app = new PIXI.Application({ resizeTo: window }); - -document.body.appendChild(app.view); - -const geometry = new PIXI.Geometry() - .addAttribute( - 'aVertexPosition', // the attribute name - [ - -100, - -100, // x, y - 100, - -100, // x, y - 100, - 100, - -100, - 100, - ], // x, y - 2, - ) // the size of the attribute - .addAttribute( - 'aUvs', // the attribute name - [ - 0, - 0, // u, v - 1, - 0, // u, v - 1, - 1, - 0, - 1, - ], // u, v - 2, - ) // the size of the attribute - .addIndex([0, 1, 2, 0, 2, 3]); - -const vertexSrc = ` - - precision mediump float; - - attribute vec2 aVertexPosition; - attribute vec2 aUvs; - - uniform mat3 translationMatrix; - uniform mat3 projectionMatrix; - - varying vec2 vUvs; - - void main() { - - vUvs = aUvs; - gl_Position = vec4((projectionMatrix * translationMatrix * vec3(aVertexPosition, 1.0)).xy, 0.0, 1.0); - - }`; - -const fragmentSrc = ` - - precision mediump float; - - varying vec2 vUvs; - - uniform sampler2D uSampler2; - uniform float time; - - void main() { - - gl_FragColor = texture2D(uSampler2, vUvs + sin( (time + (vUvs.x) * 14.) ) * 0.1 ); - }`; - -const uniforms = { - uSampler2: PIXI.Texture.from('https://pixijs.com/assets/bg_scene_rotate.jpg'), - time: 0, -}; - -const shader = PIXI.Shader.from(vertexSrc, fragmentSrc, uniforms); - -const quad = new PIXI.Mesh(geometry, shader); - -quad.position.set(400, 300); -quad.scale.set(2); - -app.stage.addChild(quad); - -// start the animation.. -// requestAnimationFrame(animate); - -app.ticker.add((delta) => -{ - quad.rotation += 0.01; - quad.shader.uniforms.time += 0.1; -}); diff --git a/src/examples/v8.0.0-rc/offscreenCanvas/basic.js b/src/examples/v8.0.0-rc/offscreenCanvas/basic.js deleted file mode 100644 index 7f7ad943b..000000000 --- a/src/examples/v8.0.0-rc/offscreenCanvas/basic.js +++ /dev/null @@ -1,44 +0,0 @@ -import * as PIXI from 'pixi.js'; - -// This example is the based on basic/container, but using OffscreenCanvas. - -const canvas = document.createElement('canvas'); -const view = canvas.transferControlToOffscreen(); - -const app = new PIXI.Application({ view, background: 0x1099bb, resizeTo: window }); - -document.body.appendChild(canvas); - -const container = new PIXI.Container(); - -app.stage.addChild(container); - -// Create a new texture -const texture = PIXI.Texture.from('https://pixijs.com/assets/bunny.png'); - -// Create a 5x5 grid of bunnies -for (let i = 0; i < 25; i++) -{ - const bunny = new PIXI.Sprite(texture); - - bunny.anchor.set(0.5); - bunny.x = (i % 5) * 40; - bunny.y = Math.floor(i / 5) * 40; - container.addChild(bunny); -} - -// Move container to the center -container.x = app.screen.width / 2; -container.y = app.screen.height / 2; - -// Center bunny sprite in local container coordinates -container.pivot.x = container.width / 2; -container.pivot.y = container.height / 2; - -// Listen for animate update -app.ticker.add((delta) => -{ - // rotate the container! - // use delta to create frame-independent transform - container.rotation -= 0.01 * delta; -}); diff --git a/src/examples/v8.0.0-rc/sprite/animatedSpriteAnimationSpeed.js b/src/examples/v8.0.0-rc/sprite/animatedSpriteAnimationSpeed.js deleted file mode 100644 index 6f7ac5118..000000000 --- a/src/examples/v8.0.0-rc/sprite/animatedSpriteAnimationSpeed.js +++ /dev/null @@ -1,47 +0,0 @@ -import * as PIXI from 'pixi.js'; - -const app = new PIXI.Application({ autoStart: false, resizeTo: window }); - -document.body.appendChild(app.view); - -PIXI.Assets.load('https://pixijs.com/assets/spritesheet/0123456789.json').then((spritesheet) => -{ - // create an array to store the textures - const textures = []; - let i; - - for (i = 0; i < 10; i++) - { - const framekey = `0123456789 ${i}.ase`; - const texture = PIXI.Texture.from(framekey); - const time = spritesheet.data.frames[framekey].duration; - - textures.push({ texture, time }); - } - - const scaling = 4; - - // create a slow AnimatedSprite - const slow = new PIXI.AnimatedSprite(textures); - - slow.anchor.set(0.5); - slow.scale.set(scaling); - slow.animationSpeed = 0.5; - slow.x = (app.screen.width - slow.width) / 2; - slow.y = app.screen.height / 2; - slow.play(); - app.stage.addChild(slow); - - // create a fast AnimatedSprite - const fast = new PIXI.AnimatedSprite(textures); - - fast.anchor.set(0.5); - fast.scale.set(scaling); - fast.x = (app.screen.width + fast.width) / 2; - fast.y = app.screen.height / 2; - fast.play(); - app.stage.addChild(fast); - - // start animating - app.start(); -}); diff --git a/src/examples/v8.0.0-rc/sprite/animatedSpriteExplosion.js b/src/examples/v8.0.0-rc/sprite/animatedSpriteExplosion.js deleted file mode 100644 index 2a1ac9554..000000000 --- a/src/examples/v8.0.0-rc/sprite/animatedSpriteExplosion.js +++ /dev/null @@ -1,36 +0,0 @@ -import * as PIXI from 'pixi.js'; - -const app = new PIXI.Application({ autoStart: false, resizeTo: window }); - -document.body.appendChild(app.view); - -PIXI.Assets.load('https://pixijs.com/assets/spritesheet/mc.json').then(() => -{ - // create an array to store the textures - const explosionTextures = []; - let i; - - for (i = 0; i < 26; i++) - { - const texture = PIXI.Texture.from(`Explosion_Sequence_A ${i + 1}.png`); - - explosionTextures.push(texture); - } - - for (i = 0; i < 50; i++) - { - // create an explosion AnimatedSprite - const explosion = new PIXI.AnimatedSprite(explosionTextures); - - explosion.x = Math.random() * app.screen.width; - explosion.y = Math.random() * app.screen.height; - explosion.anchor.set(0.5); - explosion.rotation = Math.random() * Math.PI; - explosion.scale.set(0.75 + Math.random() * 0.5); - explosion.gotoAndPlay((Math.random() * 26) | 0); - app.stage.addChild(explosion); - } - - // start animating - app.start(); -}); diff --git a/src/examples/v8.0.0-rc/sprite/animatedSpriteJet.js b/src/examples/v8.0.0-rc/sprite/animatedSpriteJet.js deleted file mode 100644 index 98111eb14..000000000 --- a/src/examples/v8.0.0-rc/sprite/animatedSpriteJet.js +++ /dev/null @@ -1,40 +0,0 @@ -import * as PIXI from 'pixi.js'; - -const app = new PIXI.Application({ background: '#1099bb', resizeTo: window }); - -document.body.appendChild(app.view); - -PIXI.Assets.load('https://pixijs.com/assets/spritesheet/fighter.json').then(() => -{ - // create an array of textures from an image path - const frames = []; - - for (let i = 0; i < 30; i++) - { - const val = i < 10 ? `0${i}` : i; - - // magically works since the spritesheet was loaded with the pixi loader - frames.push(PIXI.Texture.from(`rollSequence00${val}.png`)); - } - - // create an AnimatedSprite (brings back memories from the days of Flash, right ?) - const anim = new PIXI.AnimatedSprite(frames); - - /* - * An AnimatedSprite inherits all the properties of a PIXI sprite - * so you can change its position, its anchor, mask it, etc - */ - anim.x = app.screen.width / 2; - anim.y = app.screen.height / 2; - anim.anchor.set(0.5); - anim.animationSpeed = 0.5; - anim.play(); - - app.stage.addChild(anim); - - // Animate the rotation - app.ticker.add(() => - { - anim.rotation += 0.01; - }); -}); diff --git a/src/examples/v8.0.0-rc/sprite/basic.js b/src/examples/v8.0.0-rc/sprite/basic.js deleted file mode 100644 index 2fe2a02ad..000000000 --- a/src/examples/v8.0.0-rc/sprite/basic.js +++ /dev/null @@ -1,26 +0,0 @@ -import * as PIXI from 'pixi.js'; - -const app = new PIXI.Application({ background: '#1099bb', resizeTo: window }); - -document.body.appendChild(app.view); - -// create a new Sprite from an image path -const bunny = PIXI.Sprite.from('https://pixijs.com/assets/bunny.png'); - -// center the sprite's anchor point -bunny.anchor.set(0.5); - -// move the sprite to the center of the screen -bunny.x = app.screen.width / 2; -bunny.y = app.screen.height / 2; - -app.stage.addChild(bunny); - -// Listen for animate update -app.ticker.add((delta) => -{ - // just for fun, let's rotate mr rabbit a little - // delta is 1 if running at 100% performance - // creates frame-independent transformation - bunny.rotation += 0.1 * delta; -}); diff --git a/src/examples/v8.0.0-rc/sprite/textureSwap.js b/src/examples/v8.0.0-rc/sprite/textureSwap.js deleted file mode 100644 index bc9137bd5..000000000 --- a/src/examples/v8.0.0-rc/sprite/textureSwap.js +++ /dev/null @@ -1,38 +0,0 @@ -import * as PIXI from 'pixi.js'; - -const app = new PIXI.Application({ background: '#1099bb', resizeTo: window }); - -document.body.appendChild(app.view); - -let isFlower = true; - -const texture = PIXI.Texture.from('https://pixijs.com/assets/flowerTop.png'); -const secondTexture = PIXI.Texture.from('https://pixijs.com/assets/eggHead.png'); - -// create a new Sprite using the texture -const character = new PIXI.Sprite(texture); - -// center the sprites anchor point -character.anchor.set(0.5); - -// move the sprite to the center of the screen -character.x = app.screen.width / 2; -character.y = app.screen.height / 2; - -app.stage.addChild(character); - -// make the sprite interactive -character.eventMode = 'static'; -character.cursor = 'pointer'; - -character.on('pointertap', () => -{ - isFlower = !isFlower; - // Dynamically swap the texture - character.texture = isFlower ? texture : secondTexture; -}); - -app.ticker.add(() => -{ - character.rotation += 0.02; -}); diff --git a/src/examples/v8.0.0-rc/sprite/tilingSprite.js b/src/examples/v8.0.0-rc/sprite/tilingSprite.js deleted file mode 100644 index 3e68c2f42..000000000 --- a/src/examples/v8.0.0-rc/sprite/tilingSprite.js +++ /dev/null @@ -1,29 +0,0 @@ -import * as PIXI from 'pixi.js'; - -const app = new PIXI.Application({ resizeTo: window }); - -document.body.appendChild(app.view); - -// create a texture from an image path -const texture = PIXI.Texture.from('https://pixijs.com/assets/p2.jpeg'); - -/* create a tiling sprite ... - * requires a texture, a width and a height - * in WebGL the image size should preferably be a power of two - */ -const tilingSprite = new PIXI.TilingSprite(texture, app.screen.width, app.screen.height); - -app.stage.addChild(tilingSprite); - -let count = 0; - -app.ticker.add(() => -{ - count += 0.005; - - tilingSprite.tileScale.x = 2 + Math.sin(count); - tilingSprite.tileScale.y = 2 + Math.cos(count); - - tilingSprite.tilePosition.x += 1; - tilingSprite.tilePosition.y += 1; -}); diff --git a/src/examples/v8.0.0-rc/sprite/video.js b/src/examples/v8.0.0-rc/sprite/video.js deleted file mode 100644 index 30ed43ec0..000000000 --- a/src/examples/v8.0.0-rc/sprite/video.js +++ /dev/null @@ -1,53 +0,0 @@ -import * as PIXI from 'pixi.js'; - -const app = new PIXI.Application({ backgroundAlpha: 0, resizeTo: window }); - -document.body.appendChild(app.view); - -// Create play button that can be used to trigger the video -const button = new PIXI.Graphics() - .beginFill(0x0, 0.5) - .drawRoundedRect(0, 0, 100, 100, 10) - .endFill() - .beginFill(0xffffff) - .moveTo(36, 30) - .lineTo(36, 70) - .lineTo(70, 50); - -// Position the button -button.x = (app.screen.width - button.width) / 2; -button.y = (app.screen.height - button.height) / 2; - -// Enable interactivity on the button -button.eventMode = 'static'; -button.cursor = 'pointer'; - -// Add to the stage -app.stage.addChild(button); - -// Listen for a click/tap event to start playing the video -// this is useful for some mobile platforms. For example: -// ios9 and under cannot render videos in PIXI without a -// polyfill - https://github.com/bfred-it/iphone-inline-video -// ios10 and above require a click/tap event to render videos -// that contain audio in PIXI. Videos with no audio track do -// not have this requirement -button.on('pointertap', onPlayVideo); - -function onPlayVideo() -{ - // Don't need the button anymore - button.destroy(); - - // create a video texture from a path - const texture = PIXI.Texture.from('https://pixijs.com/assets/video.mp4'); - - // create a new Sprite using the video texture (yes it's that easy) - const videoSprite = new PIXI.Sprite(texture); - - // Stetch the fullscreen - videoSprite.width = app.screen.width; - videoSprite.height = app.screen.height; - - app.stage.addChild(videoSprite); -} diff --git a/src/examples/v8.0.0-rc/text/bitmapText.js b/src/examples/v8.0.0-rc/text/bitmapText.js deleted file mode 100644 index 88ab17415..000000000 --- a/src/examples/v8.0.0-rc/text/bitmapText.js +++ /dev/null @@ -1,19 +0,0 @@ -import * as PIXI from 'pixi.js'; - -const app = new PIXI.Application({ background: '#1099bb', resizeTo: window }); - -document.body.appendChild(app.view); - -PIXI.Assets.load('https://pixijs.com/assets/bitmap-font/desyrel.xml').then(() => -{ - const bitmapFontText = new PIXI.BitmapText('bitmap fonts are supported!\nWoo yay!', { - fontName: 'Desyrel', - fontSize: 55, - align: 'left', - }); - - bitmapFontText.x = 50; - bitmapFontText.y = 200; - - app.stage.addChild(bitmapFontText); -}); diff --git a/src/examples/v8.0.0-rc/text/fromFont.js b/src/examples/v8.0.0-rc/text/fromFont.js deleted file mode 100644 index 067e62051..000000000 --- a/src/examples/v8.0.0-rc/text/fromFont.js +++ /dev/null @@ -1,29 +0,0 @@ -import * as PIXI from 'pixi.js'; - -const app = new PIXI.Application({ background: '#1099bb', resizeTo: window }); - -document.body.appendChild(app.view); - -// Load from any font file! -PIXI.Assets.addBundle('fonts', { - ChaChicle: 'https://pixijs.com/assets/webfont-loader/ChaChicle.ttf', - Lineal: 'https://pixijs.com/assets/webfont-loader/Lineal.otf', - 'Dotrice Regular': 'https://pixijs.com/assets/webfont-loader/Dotrice-Regular.woff', - Crosterian: 'https://pixijs.com/assets/webfont-loader/Crosterian.woff2', -}); -PIXI.Assets.loadBundle('fonts').then(() => -{ - const text1 = new PIXI.Text('ChaChicle.ttf', new PIXI.TextStyle({ fontFamily: 'ChaChicle', fontSize: 50 })); - const text2 = new PIXI.Text('Lineal.otf', new PIXI.TextStyle({ fontFamily: 'Lineal', fontSize: 50 })); - const text3 = new PIXI.Text('Dotrice Regular.woff', new PIXI.TextStyle({ fontFamily: 'Dotrice Regular', fontSize: 50 })); - const text4 = new PIXI.Text('Crosterian.woff2', new PIXI.TextStyle({ fontFamily: 'Crosterian', fontSize: 50 })); - - text2.y = 150; - text3.y = 300; - text4.y = 450; - - app.stage.addChild(text1); - app.stage.addChild(text2); - app.stage.addChild(text3); - app.stage.addChild(text4); -}); diff --git a/src/examples/v8.0.0-rc/text/pixiText.js b/src/examples/v8.0.0-rc/text/pixiText.js deleted file mode 100644 index d28f6b4a9..000000000 --- a/src/examples/v8.0.0-rc/text/pixiText.js +++ /dev/null @@ -1,62 +0,0 @@ -import * as PIXI from 'pixi.js'; - -const app = new PIXI.Application({ background: '#1099bb', resizeTo: window }); - -document.body.appendChild(app.view); - -const basicText = new PIXI.Text('Basic text in pixi'); - -basicText.x = 50; -basicText.y = 100; - -app.stage.addChild(basicText); - -const style = new PIXI.TextStyle({ - fontFamily: 'Arial', - fontSize: 36, - fontStyle: 'italic', - fontWeight: 'bold', - fill: ['#ffffff', '#00ff99'], // gradient - stroke: '#4a1850', - strokeThickness: 5, - dropShadow: true, - dropShadowColor: '#000000', - dropShadowBlur: 4, - dropShadowAngle: Math.PI / 6, - dropShadowDistance: 6, - wordWrap: true, - wordWrapWidth: 440, - lineJoin: 'round', -}); - -const richText = new PIXI.Text('Rich text with a lot of options and across multiple lines', style); - -richText.x = 50; -richText.y = 220; - -app.stage.addChild(richText); - -const skewStyle = new PIXI.TextStyle({ - fontFamily: 'Arial', - dropShadow: true, - dropShadowAlpha: 0.8, - dropShadowAngle: 2.1, - dropShadowBlur: 4, - dropShadowColor: '0x111111', - dropShadowDistance: 10, - fill: ['#ffffff'], - stroke: '#004620', - fontSize: 60, - fontWeight: 'lighter', - lineJoin: 'round', - strokeThickness: 12, -}); - -const skewText = new PIXI.Text('SKEW IS COOL', skewStyle); - -skewText.skew.set(0.65, -0.3); -skewText.anchor.set(0.5, 0.5); -skewText.x = 300; -skewText.y = 480; - -app.stage.addChild(skewText); diff --git a/src/examples/v8.0.0-rc/textures/gradientBasic.js b/src/examples/v8.0.0-rc/textures/gradientBasic.js deleted file mode 100644 index 251cab554..000000000 --- a/src/examples/v8.0.0-rc/textures/gradientBasic.js +++ /dev/null @@ -1,43 +0,0 @@ -import * as PIXI from 'pixi.js'; - -// This demo uses canvas2d gradient API -// https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/createLinearGradient - -const app = new PIXI.Application({ antialias: true, resizeTo: window }); - -document.body.appendChild(app.view); - -function createGradTexture() -{ - // adjust it if somehow you need better quality for very very big images - const quality = 256; - const canvas = document.createElement('canvas'); - - canvas.width = quality; - canvas.height = 1; - - const ctx = canvas.getContext('2d'); - - // use canvas2d API to create gradient - const grd = ctx.createLinearGradient(0, 0, quality, 0); - - grd.addColorStop(0, 'rgba(255, 255, 255, 0.0)'); - grd.addColorStop(0.3, 'cyan'); - grd.addColorStop(0.7, 'red'); - grd.addColorStop(1, 'green'); - - ctx.fillStyle = grd; - ctx.fillRect(0, 0, quality, 1); - - return PIXI.Texture.from(canvas); -} - -const gradTexture = createGradTexture(); - -const sprite = new PIXI.Sprite(gradTexture); - -sprite.position.set(100, 100); -sprite.rotation = Math.PI / 8; -sprite.width = 500; -sprite.height = 50; -app.stage.addChild(sprite); diff --git a/src/examples/v8.0.0-rc/textures/gradientResource.js b/src/examples/v8.0.0-rc/textures/gradientResource.js deleted file mode 100644 index 620e85617..000000000 --- a/src/examples/v8.0.0-rc/textures/gradientResource.js +++ /dev/null @@ -1,72 +0,0 @@ -import * as PIXI from 'pixi.js'; - -// PixiJS V5 Texture-Resource API + canvas2d gradient API + WebGL texImage2D -// Look here for advanced upload function: -// https://github.com/pixijs/pixi.js/blob/dev/packages/core/src/textures/resources/BaseImageResource.js#L54 - -class GradientResource extends PIXI.Resource -{ - constructor() - { - // pass width and height. (0,0) if we dont know yet - // gradient needs only 1 pixel height - super(256, 1); - } - - upload(renderer, baseTexture, glTexture) - { - const { width } = this; // default size or from baseTexture? - const { height } = this; // your choice. - - // temporary canvas, we dont need it after texture is uploaded to GPU - const canvas = document.createElement('canvas'); - - canvas.width = width; - canvas.height = height; - - const ctx = canvas.getContext('2d'); - - const grd = ctx.createLinearGradient(0, 0, width, 0); - - grd.addColorStop(0, 'rgba(255, 255, 255, 0.0)'); - grd.addColorStop(0.3, 'cyan'); - grd.addColorStop(0.7, 'red'); - grd.addColorStop(1, 'green'); - - ctx.fillStyle = grd; - ctx.fillRect(0, 0, width, height); - - // This info ios usseful if upload happens second time - // Some people use that to track used memory - glTexture.width = width; - glTexture.height = height; - - // PURE WEBGL CALLS - that's what its all about. - // PixiJS cant wrap all that API, we give you acceess to it! - const { gl } = renderer; - - gl.pixelStorei(gl.UNPACK_PREMULTIPLY_ALPHA_WEBGL, baseTexture.premultiplyAlpha); - gl.texImage2D(baseTexture.target, 0, baseTexture.format, baseTexture.format, baseTexture.type, canvas); - - return true; - } -} - -const app = new PIXI.Application({ antialias: true, resizeTo: window }); - -document.body.appendChild(app.view); - -const gradBaseTexture = new PIXI.BaseTexture(new GradientResource()); -// Here you can fake baseTexture size to avoid resizing all sprites -// There can be multiple baseTextures per gradient, but be careful: -// resource will spawn more glTextures! - -gradBaseTexture.setSize(500, 50); - -const gradTexture = new PIXI.Texture(gradBaseTexture); - -const sprite = new PIXI.Sprite(gradTexture); - -sprite.position.set(100, 100); -sprite.rotation = Math.PI / 8; -app.stage.addChild(sprite); diff --git a/src/examples/v8.0.0-rc/textures/renderTextureAdvanced.js b/src/examples/v8.0.0-rc/textures/renderTextureAdvanced.js deleted file mode 100644 index e7cdfd4b8..000000000 --- a/src/examples/v8.0.0-rc/textures/renderTextureAdvanced.js +++ /dev/null @@ -1,96 +0,0 @@ -import * as PIXI from 'pixi.js'; - -const app = new PIXI.Application({ resizeTo: window }); - -document.body.appendChild(app.view); - -const stageSize = { - width: app.screen.width, - height: app.screen.height, -}; - -// create two render textures... these dynamic textures will be used to draw the scene into itself -let renderTexture = PIXI.RenderTexture.create(stageSize); -let renderTexture2 = PIXI.RenderTexture.create(stageSize); -const currentTexture = renderTexture; - -// create a new sprite that uses the render texture we created above -const outputSprite = new PIXI.Sprite(currentTexture); - -// align the sprite -outputSprite.x = 400; -outputSprite.y = 300; -outputSprite.anchor.set(0.5); - -// add to stage -app.stage.addChild(outputSprite); - -const stuffContainer = new PIXI.Container(); - -stuffContainer.x = 400; -stuffContainer.y = 300; - -app.stage.addChild(stuffContainer); - -// create an array of image ids.. -const fruits = [ - 'https://pixijs.com/assets/rt_object_01.png', - 'https://pixijs.com/assets/rt_object_02.png', - 'https://pixijs.com/assets/rt_object_03.png', - 'https://pixijs.com/assets/rt_object_04.png', - 'https://pixijs.com/assets/rt_object_05.png', - 'https://pixijs.com/assets/rt_object_06.png', - 'https://pixijs.com/assets/rt_object_07.png', - 'https://pixijs.com/assets/rt_object_08.png', -]; - -// create an array of items -const items = []; - -// now create some items and randomly position them in the stuff container -for (let i = 0; i < 20; i++) -{ - const item = PIXI.Sprite.from(fruits[i % fruits.length]); - - item.x = Math.random() * 400 - 200; - item.y = Math.random() * 400 - 200; - item.anchor.set(0.5); - stuffContainer.addChild(item); - items.push(item); -} - -// used for spinning! -let count = 0; - -app.ticker.add(() => -{ - for (let i = 0; i < items.length; i++) - { - // rotate each item - const item = items[i]; - - item.rotation += 0.1; - } - - count += 0.01; - - // swap the buffers ... - const temp = renderTexture; - - renderTexture = renderTexture2; - renderTexture2 = temp; - - // set the new texture - outputSprite.texture = renderTexture; - - // twist this up! - stuffContainer.rotation -= 0.01; - outputSprite.scale.set(1 + Math.sin(count) * 0.2); - - // render the stage to the texture - // the 'true' clears the texture before the content is rendered - app.renderer.render(app.stage, { - renderTexture: renderTexture2, - clear: false, - }); -}); diff --git a/src/examples/v8.0.0-rc/textures/renderTextureBasic.js b/src/examples/v8.0.0-rc/textures/renderTextureBasic.js deleted file mode 100644 index dd55a1e81..000000000 --- a/src/examples/v8.0.0-rc/textures/renderTextureBasic.js +++ /dev/null @@ -1,48 +0,0 @@ -import * as PIXI from 'pixi.js'; - -const app = new PIXI.Application({ background: '#1099bb', resizeTo: window }); - -document.body.appendChild(app.view); - -const container = new PIXI.Container(); - -app.stage.addChild(container); - -const texture = PIXI.Texture.from('https://pixijs.com/assets/bunny.png'); - -for (let i = 0; i < 25; i++) -{ - const bunny = new PIXI.Sprite(texture); - - bunny.x = (i % 5) * 30; - bunny.y = Math.floor(i / 5) * 30; - bunny.rotation = Math.random() * (Math.PI * 2); - container.addChild(bunny); -} - -const rt = PIXI.RenderTexture.create({ - width: 300, - height: 300, - scaleMode: PIXI.SCALE_MODES.LINEAR, - resolution: 1, -}); - -const sprite = new PIXI.Sprite(rt); - -sprite.x = 450; -sprite.y = 60; -app.stage.addChild(sprite); - -/* - * All the bunnies are added to the container with the addChild method - * when you do this, all the bunnies become children of the container, and when a container moves, - * so do all its children. - * This gives you a lot of flexibility and makes it easier to position elements on the screen - */ -container.x = 100; -container.y = 60; - -app.ticker.add(() => -{ - app.renderer.render(container, { renderTexture: rt }); -}); diff --git a/src/examples/v8.0.0-rc/textures/textureRotate.js b/src/examples/v8.0.0-rc/textures/textureRotate.js deleted file mode 100644 index 0c1616906..000000000 --- a/src/examples/v8.0.0-rc/textures/textureRotate.js +++ /dev/null @@ -1,65 +0,0 @@ -import * as PIXI from 'pixi.js'; - -const app = new PIXI.Application({ resizeTo: window }); - -document.body.appendChild(app.view); - -PIXI.Assets.load('https://pixijs.com/assets/flowerTop.png').then((texture) => -{ - // create rotated textures - const textures = [texture]; - const D8 = PIXI.groupD8; - - for (let rotate = 1; rotate < 16; rotate++) - { - const h = D8.isVertical(rotate) ? texture.frame.width : texture.frame.height; - const w = D8.isVertical(rotate) ? texture.frame.height : texture.frame.width; - - const { frame } = texture; - const crop = new PIXI.Rectangle(texture.frame.x, texture.frame.y, w, h); - const trim = crop; - let rotatedTexture; - - if (rotate % 2 === 0) - { - rotatedTexture = new PIXI.Texture(texture.baseTexture, frame, crop, trim, rotate); - } - else - { - // HACK to avoid exception - // PIXI doesnt like diamond-shaped UVs, because they are different in canvas and webgl - rotatedTexture = new PIXI.Texture(texture.baseTexture, frame, crop, trim, rotate - 1); - rotatedTexture.rotate++; - } - textures.push(rotatedTexture); - } - - const offsetX = (app.screen.width / 16) | 0; - const offsetY = (app.screen.height / 8) | 0; - const gridW = (app.screen.width / 4) | 0; - const gridH = (app.screen.height / 5) | 0; - - // normal rotations and mirrors - for (let i = 0; i < 16; i++) - { - // create a new Sprite using rotated texture - const dude = new PIXI.Sprite(textures[i < 8 ? i * 2 : (i - 8) * 2 + 1]); - - dude.scale.x = 0.5; - dude.scale.y = 0.5; - // show it in grid - dude.x = offsetX + gridW * (i % 4); - dude.y = offsetY + gridH * ((i / 4) | 0); - app.stage.addChild(dude); - const text = new PIXI.Text(`rotate = ${dude.texture.rotate}`, { - fontFamily: 'Courier New', - fontSize: '12px', - fill: 'white', - align: 'left', - }); - - text.x = dude.x; - text.y = dude.y - 20; - app.stage.addChild(text); - } -}); diff --git a/src/examples/v8.0.0/advanced/collisionDetection.js b/src/examples/v8.0.0/advanced/collisionDetection.js new file mode 100644 index 000000000..6e02def44 --- /dev/null +++ b/src/examples/v8.0.0/advanced/collisionDetection.js @@ -0,0 +1,194 @@ +import { Application, Assets, Point, Sprite, Texture } from 'pixi.js'; + +// Based somewhat on this article by Spicy Yoghurt +// URL for further reading: https://spicyyoghurt.com/tutorials/html5-javascript-game-development/collision-detection-physics +(async () => +{ + // Create a new application + const app = new Application(); + + // Initialize the application + await app.init({ background: '#111', resizeTo: window }); + + // Append the application canvas to the document body + document.body.appendChild(app.canvas); + + // Options for how objects interact + // How fast the red square moves + const movementSpeed = 0.05; + + // Strength of the impulse push between two objects + const impulsePower = 5; + + // Test For Hit + // A basic AABB check between two different squares + function testForAABB(object1, object2) + { + const bounds1 = object1.getBounds(); + const bounds2 = object2.getBounds(); + + return ( + bounds1.x < bounds2.x + bounds2.width + && bounds1.x + bounds1.width > bounds2.x + && bounds1.y < bounds2.y + bounds2.height + && bounds1.y + bounds1.height > bounds2.y + ); + } + + // Calculates the results of a collision, allowing us to give an impulse that + // shoves objects apart + function collisionResponse(object1, object2) + { + if (!object1 || !object2) + { + return new Point(0); + } + + const vCollision = new Point(object2.x - object1.x, object2.y - object1.y); + + const distance = Math.sqrt( + (object2.x - object1.x) * (object2.x - object1.x) + (object2.y - object1.y) * (object2.y - object1.y), + ); + + const vCollisionNorm = new Point(vCollision.x / distance, vCollision.y / distance); + + const vRelativeVelocity = new Point( + object1.acceleration.x - object2.acceleration.x, + object1.acceleration.y - object2.acceleration.y, + ); + + const speed = vRelativeVelocity.x * vCollisionNorm.x + vRelativeVelocity.y * vCollisionNorm.y; + + const impulse = (impulsePower * speed) / (object1.mass + object2.mass); + + return new Point(impulse * vCollisionNorm.x, impulse * vCollisionNorm.y); + } + + // Calculate the distance between two given points + function distanceBetweenTwoPoints(p1, p2) + { + const a = p1.x - p2.x; + const b = p1.y - p2.y; + + return Math.hypot(a, b); + } + + // The green square we will knock about + const greenSquare = new Sprite(Texture.WHITE); + + greenSquare.position.set((app.screen.width - 100) / 2, (app.screen.height - 100) / 2); + greenSquare.width = 100; + greenSquare.height = 100; + greenSquare.tint = 0x00ff00; + greenSquare.acceleration = new Point(0); + greenSquare.mass = 3; + + // The square you move around + const redSquare = new Sprite(Texture.WHITE); + + redSquare.position.set(0, 0); + redSquare.width = 100; + redSquare.height = 100; + redSquare.tint = 0xff0000; + redSquare.acceleration = new Point(0); + redSquare.mass = 1; + + const mouseCoords = { x: 0, y: 0 }; + + app.stage.eventMode = 'static'; + app.stage.hitArea = app.screen; + app.stage.on('mousemove', (event) => + { + mouseCoords.x = event.global.x; + mouseCoords.y = event.global.y; + }); + + // Listen for animate update + app.ticker.add((time) => + { + const delta = time.deltaTime; + + // Applied deacceleration for both squares, done by reducing the + // acceleration by 0.01% of the acceleration every loop + redSquare.acceleration.set(redSquare.acceleration.x * 0.99, redSquare.acceleration.y * 0.99); + greenSquare.acceleration.set(greenSquare.acceleration.x * 0.99, greenSquare.acceleration.y * 0.99); + + // Check whether the green square ever moves off the screen + // If so, reverse acceleration in that direction + if (greenSquare.x < 0 || greenSquare.x > app.screen.width - 100) + { + greenSquare.acceleration.x = -greenSquare.acceleration.x; + } + + if (greenSquare.y < 0 || greenSquare.y > app.screen.height - 100) + { + greenSquare.acceleration.y = -greenSquare.acceleration.y; + } + + // If the green square pops out of the cordon, it pops back into the + // middle + if ( + greenSquare.x < -30 + || greenSquare.x > app.screen.width + 30 + || greenSquare.y < -30 + || greenSquare.y > app.screen.height + 30 + ) + { + greenSquare.position.set((app.screen.width - 100) / 2, (app.screen.height - 100) / 2); + } + + // If the mouse is off screen, then don't update any further + if ( + app.screen.width > mouseCoords.x + || mouseCoords.x > 0 + || app.screen.height > mouseCoords.y + || mouseCoords.y > 0 + ) + { + // Get the red square's center point + const redSquareCenterPosition = new Point( + redSquare.x + redSquare.width * 0.5, + redSquare.y + redSquare.height * 0.5, + ); + + // Calculate the direction vector between the mouse pointer and + // the red square + const toMouseDirection = new Point( + mouseCoords.x - redSquareCenterPosition.x, + mouseCoords.y - redSquareCenterPosition.y, + ); + + // Use the above to figure out the angle that direction has + const angleToMouse = Math.atan2(toMouseDirection.y, toMouseDirection.x); + + // Figure out the speed the square should be travelling by, as a + // function of how far away from the mouse pointer the red square is + const distMouseRedSquare = distanceBetweenTwoPoints(mouseCoords, redSquareCenterPosition); + const redSpeed = distMouseRedSquare * movementSpeed; + + // Calculate the acceleration of the red square + redSquare.acceleration.set(Math.cos(angleToMouse) * redSpeed, Math.sin(angleToMouse) * redSpeed); + } + + // If the two squares are colliding + if (testForAABB(greenSquare, redSquare)) + { + // Calculate the changes in acceleration that should be made between + // each square as a result of the collision + const collisionPush = collisionResponse(greenSquare, redSquare); + // Set the changes in acceleration for both squares + + redSquare.acceleration.set(collisionPush.x * greenSquare.mass, collisionPush.y * greenSquare.mass); + greenSquare.acceleration.set(-(collisionPush.x * redSquare.mass), -(collisionPush.y * redSquare.mass)); + } + + greenSquare.x += greenSquare.acceleration.x * delta; + greenSquare.y += greenSquare.acceleration.y * delta; + + redSquare.x += redSquare.acceleration.x * delta; + redSquare.y += redSquare.acceleration.y * delta; + }); + + // Add to stage + app.stage.addChild(redSquare, greenSquare); +})(); diff --git a/src/examples/v8.0.0/advanced/mouseTrail.js b/src/examples/v8.0.0/advanced/mouseTrail.js new file mode 100644 index 000000000..7c3baa059 --- /dev/null +++ b/src/examples/v8.0.0/advanced/mouseTrail.js @@ -0,0 +1,111 @@ +import { Application, Assets, Point, Sprite, MeshRope } from 'pixi.js'; + +(async () => +{ + // Create a new application + const app = new Application(); + + // Initialize the application + await app.init({ background: '#1099bb', resizeTo: window }); + + // Append the application canvas to the document body + document.body.appendChild(app.canvas); + + // Load the texture for rope. + const trailTexture = await Assets.load('https://pixijs.com/assets/trail.png'); + + const historyX = []; + const historyY = []; + // historySize determines how long the trail will be. + const historySize = 20; + // ropeSize determines how smooth the trail will be. + const ropeSize = 100; + const points = []; + + // Create history array. + for (let i = 0; i < historySize; i++) + { + historyX.push(0); + + historyY.push(0); + } + // Create rope points. + for (let i = 0; i < ropeSize; i++) + { + points.push(new Point(0, 0)); + } + + // Create the rope + const rope = new MeshRope({ texture: trailTexture, points }); + + // Set the blendmode + rope.blendmode = 'add'; + + app.stage.addChild(rope); + + let mouseposition = null; + + app.stage.eventMode = 'static'; + app.stage.hitArea = app.screen; + app.stage.on('mousemove', (event) => + { + mouseposition = mouseposition || { x: 0, y: 0 }; + mouseposition.x = event.global.x; + mouseposition.y = event.global.y; + }); + + // Listen for animate update + app.ticker.add(() => + { + if (!mouseposition) return; + + // Update the mouse values to history + historyX.pop(); + historyX.unshift(mouseposition.x); + historyY.pop(); + historyY.unshift(mouseposition.y); + // Update the points to correspond with history. + for (let i = 0; i < ropeSize; i++) + { + const p = points[i]; + + // Smooth the curve with cubic interpolation to prevent sharp edges. + const ix = cubicInterpolation(historyX, (i / ropeSize) * historySize); + const iy = cubicInterpolation(historyY, (i / ropeSize) * historySize); + + p.x = ix; + p.y = iy; + } + }); + + /** + * Cubic interpolation based on https://github.com/osuushi/Smooth.js + */ + function clipInput(k, arr) + { + if (k < 0) k = 0; + if (k > arr.length - 1) k = arr.length - 1; + + return arr[k]; + } + + function getTangent(k, factor, array) + { + return (factor * (clipInput(k + 1, array) - clipInput(k - 1, array))) / 2; + } + + function cubicInterpolation(array, t, tangentFactor) + { + if (tangentFactor === null) tangentFactor = 1; + + const k = Math.floor(t); + const m = [getTangent(k, tangentFactor, array), getTangent(k + 1, tangentFactor, array)]; + const p = [clipInput(k, array), clipInput(k + 1, array)]; + + t -= k; + const t2 = t * t; + const t3 = t * t2; + + return (2 * t3 - 3 * t2 + 1) * p[0] + (t3 - 2 * t2 + t) * m[0] + (-2 * t3 + 3 * t2) * p[1] + (t3 - t2) * m[1]; + } +})(); diff --git a/src/examples/v8.0.0/advanced/scratchCard.js b/src/examples/v8.0.0/advanced/scratchCard.js new file mode 100644 index 000000000..991fcbb66 --- /dev/null +++ b/src/examples/v8.0.0/advanced/scratchCard.js @@ -0,0 +1,86 @@ +import { Application, Assets, Graphics, Sprite, RenderTexture, Point } from 'pixi.js'; + +(async () => +{ + // Create a new application + const app = new Application(); + + // Initialize the application + await app.init({ resizeTo: window }); + + // Append the application canvas to the document body + document.body.appendChild(app.canvas); + + // prepare circle texture, that will be our brush + const brush = new Graphics().circle(0, 0, 50).fill({ color: 0xffffff }); + + // Create a line that will interpolate the drawn points + const line = new Graphics(); + + // Load the textures + await Assets.load(['https://pixijs.com/assets/bg_grass.jpg', 'https://pixijs.com/assets/bg_rotate.jpg']); + + const { width, height } = app.screen; + const stageSize = { width, height }; + + const background = Object.assign(Sprite.from('https://pixijs.com/assets/bg_grass.jpg'), stageSize); + const imageToReveal = Object.assign(Sprite.from('https://pixijs.com/assets/bg_rotate.jpg'), stageSize); + const renderTexture = RenderTexture.create(stageSize); + const renderTextureSprite = new Sprite(renderTexture); + + imageToReveal.mask = renderTextureSprite; + + app.stage.addChild(background, imageToReveal, renderTextureSprite); + + app.stage.eventMode = 'static'; + app.stage.hitArea = app.screen; + app.stage + .on('pointerdown', pointerDown) + .on('pointerup', pointerUp) + .on('pointerupoutside', pointerUp) + .on('pointermove', pointerMove); + + let dragging = false; + let lastDrawnPoint = null; + + function pointerMove({ global: { x, y } }) + { + if (dragging) + { + brush.position.set(x, y); + app.renderer.render({ + container: brush, + target: renderTexture, + clear: false, + skipUpdateTransform: false, + }); + // Smooth out the drawing a little bit to make it look nicer + // this connects the previous drawn point to the current one + // using a line + if (lastDrawnPoint) + { + line.clear().moveTo(lastDrawnPoint.x, lastDrawnPoint.y).lineTo(x, y).stroke({ width: 100, color: 0xffffff }); + app.renderer.render({ + container: line, + target: renderTexture, + clear: false, + skipUpdateTransform: false, + }); + } + lastDrawnPoint = lastDrawnPoint || new Point(); + lastDrawnPoint.set(x, y); + } + } + + function pointerDown(event) + { + dragging = true; + pointerMove(event); + } + + function pointerUp(event) + { + dragging = false; + lastDrawnPoint = null; + } +})(); diff --git a/src/examples/v8.0.0/advanced/screenShot.js b/src/examples/v8.0.0/advanced/screenShot.js new file mode 100644 index 000000000..3ca59ca59 --- /dev/null +++ b/src/examples/v8.0.0/advanced/screenShot.js @@ -0,0 +1,71 @@ +import { Application, Assets, Container, Sprite, Text, TextStyle } from 'pixi.js'; + +(async () => +{ + // Create a new application + const app = new Application(); + + // Initialize the application + await app.init({ background: '#111', resizeTo: window }); + + // Append the application canvas to the document body + document.body.appendChild(app.canvas); + + // Load the bunny texture + const texture = await Assets.load('https://pixijs.com/assets/bunny.png'); + + // Create and add a container for the bunnies + const bunnyContainer = new Container(); + + // Take the screenshot and download it + async function takeScreenshot() + { + app.stop(); + const url = await app.renderer.extract.base64(bunnyContainer); + const a = document.createElement('a'); + + document.body.append(a); + a.download = 'screenshot'; + a.href = url; + a.click(); + a.remove(); + app.start(); + } + + app.stage.eventMode = 'static'; + app.stage.hitArea = app.screen; + app.stage.on('pointerdown', takeScreenshot); + + for (let i = 0; i < 25; i++) + { + const bunny = new Sprite(texture); + + bunny.anchor.set(0.5); + bunny.x = (i % 5) * 40; + bunny.y = Math.floor(i / 5) * 40; + bunnyContainer.addChild(bunny); + } + + bunnyContainer.x = 400; + bunnyContainer.y = 300; + bunnyContainer.pivot.x = bunnyContainer.width / 2; + bunnyContainer.pivot.y = bunnyContainer.height / 2; + + // Animate the bunnies container + app.ticker.add((time) => + { + bunnyContainer.rotation += 0.01 * time.deltaTime; + }); + + const style = new TextStyle({ + fontFamily: 'Roboto', + fill: '#999', + }); + + const screenshotText = new Text({ text: 'Click To Take Screenshot', style }); + + screenshotText.x = Math.round((app.screen.width - screenshotText.width) / 2); + screenshotText.y = Math.round(screenshotText.height / 2); + + app.stage.addChild(screenshotText, bunnyContainer); +})(); diff --git a/src/examples/v8.0.0-rc/advanced/slots.js b/src/examples/v8.0.0/advanced/slots.js similarity index 50% rename from src/examples/v8.0.0-rc/advanced/slots.js rename to src/examples/v8.0.0/advanced/slots.js index d25099efd..b0fe45231 100644 --- a/src/examples/v8.0.0-rc/advanced/slots.js +++ b/src/examples/v8.0.0/advanced/slots.js @@ -1,37 +1,54 @@ -import * as PIXI from 'pixi.js'; +import { + Application, + Assets, + Color, + Container, + Texture, + Sprite, + Graphics, + Text, + TextStyle, + BlurFilter, + FillGradient, +} from 'pixi.js'; + +(async () => +{ + // Create a new application + const app = new Application(); -const app = new PIXI.Application({ background: '#1099bb', resizeTo: window }); + // Initialize the application + await app.init({ background: '#1099bb', resizeTo: window }); -document.body.appendChild(app.view); + // Append the application canvas to the document body + document.body.appendChild(app.canvas); -PIXI.Assets.load([ - 'https://pixijs.com/assets/eggHead.png', - 'https://pixijs.com/assets/flowerTop.png', - 'https://pixijs.com/assets/helmlok.png', - 'https://pixijs.com/assets/skully.png', -]).then(onAssetsLoaded); + // Load the textures + await Assets.load([ + 'https://pixijs.com/assets/eggHead.png', + 'https://pixijs.com/assets/flowerTop.png', + 'https://pixijs.com/assets/helmlok.png', + 'https://pixijs.com/assets/skully.png', + ]); -const REEL_WIDTH = 160; -const SYMBOL_SIZE = 150; + const REEL_WIDTH = 160; + const SYMBOL_SIZE = 150; -// onAssetsLoaded handler builds the example. -function onAssetsLoaded() -{ - // Create different slot symbols. + // Create different slot symbols const slotTextures = [ - PIXI.Texture.from('https://pixijs.com/assets/eggHead.png'), - PIXI.Texture.from('https://pixijs.com/assets/flowerTop.png'), - PIXI.Texture.from('https://pixijs.com/assets/helmlok.png'), - PIXI.Texture.from('https://pixijs.com/assets/skully.png'), + Texture.from('https://pixijs.com/assets/eggHead.png'), + Texture.from('https://pixijs.com/assets/flowerTop.png'), + Texture.from('https://pixijs.com/assets/helmlok.png'), + Texture.from('https://pixijs.com/assets/skully.png'), ]; // Build the reels const reels = []; - const reelContainer = new PIXI.Container(); + const reelContainer = new Container(); for (let i = 0; i < 5; i++) { - const rc = new PIXI.Container(); + const rc = new Container(); rc.x = i * REEL_WIDTH; reelContainer.addChild(rc); @@ -41,7 +58,7 @@ function onAssetsLoaded() symbols: [], position: 0, previousPosition: 0, - blur: new PIXI.filters.BlurFilter(), + blur: new BlurFilter(), }; reel.blur.blurX = 0; @@ -51,7 +68,7 @@ function onAssetsLoaded() // Build the symbols for (let j = 0; j < 4; j++) { - const symbol = new PIXI.Sprite(slotTextures[Math.floor(Math.random() * slotTextures.length)]); + const symbol = new Sprite(slotTextures[Math.floor(Math.random() * slotTextures.length)]); // Scale the symbol to fit symbol area. symbol.y = j * SYMBOL_SIZE; @@ -69,41 +86,47 @@ function onAssetsLoaded() reelContainer.y = margin; reelContainer.x = Math.round(app.screen.width - REEL_WIDTH * 5); - const top = new PIXI.Graphics(); + const top = new Graphics().rect(0, 0, app.screen.width, margin).fill({ color: 0x0 }); + const bottom = new Graphics().rect(0, SYMBOL_SIZE * 3 + margin, app.screen.width, margin).fill({ color: 0x0 }); - top.beginFill(0, 1); - top.drawRect(0, 0, app.screen.width, margin); - const bottom = new PIXI.Graphics(); + // Create gradient fill + const fill = new FillGradient(0, 0, 0, 36 * 1.7); - bottom.beginFill(0, 1); - bottom.drawRect(0, SYMBOL_SIZE * 3 + margin, app.screen.width, margin); + const colors = [0xffffff, 0x00ff99].map((color) => Color.shared.setValue(color).toNumber()); + + colors.forEach((number, index) => + { + const ratio = index / colors.length; + + fill.addColorStop(ratio, number); + }); // Add play text - const style = new PIXI.TextStyle({ + const style = new TextStyle({ fontFamily: 'Arial', fontSize: 36, fontStyle: 'italic', fontWeight: 'bold', - fill: ['#ffffff', '#00ff99'], // gradient - stroke: '#4a1850', - strokeThickness: 5, - dropShadow: true, - dropShadowColor: '#000000', - dropShadowBlur: 4, - dropShadowAngle: Math.PI / 6, - dropShadowDistance: 6, + fill: { fill }, + stroke: { color: 0x4a1850, width: 5 }, + dropShadow: { + color: 0x000000, + angle: Math.PI / 6, + blur: 4, + distance: 6, + }, wordWrap: true, wordWrapWidth: 440, }); - const playText = new PIXI.Text('Spin the wheels!', style); + const playText = new Text('Spin the wheels!', style); playText.x = Math.round((bottom.width - playText.width) / 2); playText.y = app.screen.height - margin + Math.round((margin - playText.height) / 2); bottom.addChild(playText); // Add header text - const headerText = new PIXI.Text('PIXI MONSTER SLOTS!', style); + const headerText = new Text('PIXI MONSTER SLOTS!', style); headerText.x = Math.round((top.width - headerText.width) / 2); headerText.y = Math.round((margin - headerText.height) / 2); @@ -146,7 +169,7 @@ function onAssetsLoaded() } // Listen for animate update. - app.ticker.add((delta) => + app.ticker.add(() => { // Update the slots. for (let i = 0; i < reels.length; i++) @@ -176,64 +199,64 @@ function onAssetsLoaded() } } }); -} -// Very simple tweening utility function. This should be replaced with a proper tweening library in a real product. -const tweening = []; + // Very simple tweening utility function. This should be replaced with a proper tweening library in a real product. + const tweening = []; -function tweenTo(object, property, target, time, easing, onchange, oncomplete) -{ - const tween = { - object, - property, - propertyBeginValue: object[property], - target, - easing, - time, - change: onchange, - complete: oncomplete, - start: Date.now(), - }; - - tweening.push(tween); - - return tween; -} -// Listen for animate update. -app.ticker.add((delta) => -{ - const now = Date.now(); - const remove = []; + function tweenTo(object, property, target, time, easing, onchange, oncomplete) + { + const tween = { + object, + property, + propertyBeginValue: object[property], + target, + easing, + time, + change: onchange, + complete: oncomplete, + start: Date.now(), + }; - for (let i = 0; i < tweening.length; i++) + tweening.push(tween); + + return tween; + } + // Listen for animate update. + app.ticker.add(() => { - const t = tweening[i]; - const phase = Math.min(1, (now - t.start) / t.time); + const now = Date.now(); + const remove = []; - t.object[t.property] = lerp(t.propertyBeginValue, t.target, t.easing(phase)); - if (t.change) t.change(t); - if (phase === 1) + for (let i = 0; i < tweening.length; i++) { - t.object[t.property] = t.target; - if (t.complete) t.complete(t); - remove.push(t); + const t = tweening[i]; + const phase = Math.min(1, (now - t.start) / t.time); + + t.object[t.property] = lerp(t.propertyBeginValue, t.target, t.easing(phase)); + if (t.change) t.change(t); + if (phase === 1) + { + t.object[t.property] = t.target; + if (t.complete) t.complete(t); + remove.push(t); + } } - } - for (let i = 0; i < remove.length; i++) + for (let i = 0; i < remove.length; i++) + { + tweening.splice(tweening.indexOf(remove[i]), 1); + } + }); + + // Basic lerp funtion. + function lerp(a1, a2, t) { - tweening.splice(tweening.indexOf(remove[i]), 1); + return a1 * (1 - t) + a2 * t; } -}); - -// Basic lerp funtion. -function lerp(a1, a2, t) -{ - return a1 * (1 - t) + a2 * t; -} -// Backout function from tweenjs. -// https://github.com/CreateJS/TweenJS/blob/master/src/tweenjs/Ease.js -function backout(amount) -{ - return (t) => --t * t * ((amount + 1) * t + amount) + 1; -} + // Backout function from tweenjs. + // https://github.com/CreateJS/TweenJS/blob/master/src/tweenjs/Ease.js + function backout(amount) + { + return (t) => --t * t * ((amount + 1) * t + amount) + 1; + } +})(); diff --git a/src/examples/v8.0.0/advanced/spinners.js b/src/examples/v8.0.0/advanced/spinners.js new file mode 100644 index 000000000..a5daf54bc --- /dev/null +++ b/src/examples/v8.0.0/advanced/spinners.js @@ -0,0 +1,422 @@ +import { Application, Assets, Container, Sprite, Point, Graphics } from 'pixi.js'; + +(async () => +{ + // Create a new application + const app = new Application(); + + // Initialize the application + await app.init({ antialias: true, background: '#1099bb', resizeTo: window }); + + // Append the application canvas to the document body + document.body.appendChild(app.canvas); + + // Load the textures + await Assets.load([ + 'https://pixijs.com/assets/bg_scene_rotate.jpg', + 'https://pixijs.com/assets/bg_rotate.jpg', + 'https://pixijs.com/assets/circle.png', + ]); + + /* --------------------------------------- + Spinner 1. Square with radial completion. + -------------------------------------- */ + const generateSpinner1 = (position) => + { + const container = new Container(); + + container.position = position; + app.stage.addChild(container); + + const base = Sprite.from('https://pixijs.com/assets/bg_scene_rotate.jpg'); + const size = 100; + + base.width = size; + base.height = size; + + const bottom = Sprite.from('https://pixijs.com/assets/bg_rotate.jpg'); + + bottom.width = size; + bottom.height = size; + + const mask = new Graphics(); + + mask.position.set(size / 2, size / 2); + base.mask = mask; + window.mask = mask; + + container.addChild(bottom); + container.addChild(base); + container.addChild(mask); + + let phase = 0; + + return (delta) => + { + // Update phase + phase += delta / 60; + phase %= Math.PI * 2; + + // Calculate target point. + const x = Math.cos(phase - Math.PI / 2) * size; + const y = Math.sin(phase - Math.PI / 2) * size; + + const segments = [ + [-size / 2, -size / 2, size / 2, -size / 2], // top segment + [size / 2, -size / 2, size / 2, size / 2], // right + [-size / 2, size / 2, size / 2, size / 2], // bottom + [-size / 2, -size / 2, -size / 2, size / 2], // left + ]; + + // Find the intersecting segment. + let intersection = null; + let winding = 0; + + for (let i = 0; i < segments.length; i++) + { + const segment = segments[i]; + const hit = intersect(0, 0, x, y, segment[0], segment[1], segment[2], segment[3]); + + if (hit) + { + intersection = hit; + if (i === 0) winding = hit.x > 0 ? 0 : 4; + else winding = i; + break; + } + } + + const corners = [ + size / 2, + -size / 2, // Top right + size / 2, + size / 2, // Bottom right + -size / 2, + size / 2, // Bottom left + -size / 2, + -size / 2, // Top left, + 0, + -size / 2, // End point + ]; + + // Redraw mask + mask.clear() + .moveTo(0, -size / 2) + .lineTo(0, 0) + .lineTo(intersection.x, intersection.y); + + // fill the corners + for (let i = winding; i < corners.length / 2; i++) + { + mask.lineTo(corners[i * 2], corners[i * 2 + 1]); + } + + mask.fill({ color: 0xff0000 }); + }; + }; + + /* ----------------------- + Spinner 2. Scaling balls. + ---------------------- */ + const generateSpinner2 = (position) => + { + const container = new Container(); + + container.position = position; + app.stage.addChild(container); + + const size = 100; + const ballAmount = 7; + const balls = []; + + for (let i = 0; i < ballAmount; i++) + { + const ball = Sprite.from('https://pixijs.com/assets/circle.png'); + + ball.anchor.set(0.5); + container.addChild(ball); + ball.position.set( + size / 2 + (Math.cos((i / ballAmount) * Math.PI * 2) * size) / 3, + size / 2 + (Math.sin((i / ballAmount) * Math.PI * 2) * size) / 3, + ); + balls.push(ball); + } + + let phase = 0; + + return (delta) => + { + // Update phase + phase += delta / 60; + phase %= Math.PI * 2; + + // Update ball scales + balls.forEach((b, i) => + { + const sin = Math.sin((i / ballAmount) * Math.PI - phase); + // Multiply sin with itself to get more steeper edge. + + b.scale.set(Math.abs(sin * sin * sin * 0.5) + 0.5); + }); + }; + }; + + /* --------------------- + Spinner 3. Radial mask. + -------------------- */ + const generateSpinner3 = (position) => + { + const container = new Container(); + + container.position = position; + app.stage.addChild(container); + + const base = Sprite.from('https://pixijs.com/assets/bg_scene_rotate.jpg'); + const size = 100; + + base.width = size; + base.height = size; + + const mask = new Graphics(); + + mask.position.set(size / 2, size / 2); + base.mask = mask; + window.mask = mask; + + container.addChild(base); + container.addChild(mask); + + let phase = 0; + + return (delta) => + { + // Update phase + phase += delta / 60; + phase %= Math.PI * 2; + + const angleStart = 0 - Math.PI / 2; + const angle = phase + angleStart; + const radius = 50; + + const x1 = Math.cos(angleStart) * radius; + const y1 = Math.sin(angleStart) * radius; + + // Redraw mask + mask.clear() + .moveTo(0, 0) + .lineTo(x1, y1) + .arc(0, 0, radius, angleStart, angle, false) + .lineTo(0, 0) + .fill({ color: 0xff0000 }); + }; + }; + + /* --------------------------------- + Spinner 4. Rounded rectangle edges. + ------------------------------- */ + const generateSpinner4 = (position) => + { + const container = new Container(); + + container.position = position; + app.stage.addChild(container); + + const size = 100; + const arcRadius = 15; + + const base = Sprite.from('https://pixijs.com/assets/bg_scene_rotate.jpg'); + + base.width = size; + base.height = size; + + // For better performance having assets prerounded would be better than masking. + const roundingMask = new Graphics(); + + roundingMask.roundRect(0, 0, size, size, arcRadius).fill({ color: 0x0 }); + base.mask = roundingMask; + + // The edge could be replaced with image as well. + const lineSize = 5; + const edge = new Graphics(); + + edge.roundRect(0, 0, size, size, arcRadius).stroke({ width: lineSize, color: 0xff0000 }); + + // Mask in this example works basically the same way as in example 1. + // Except it is reversed and calculates the mask in straight lines in edges. + const mask = new Graphics(); + + mask.position.set(size / 2, size / 2); + edge.mask = mask; + + container.addChild(base); + container.addChild(roundingMask); + container.addChild(edge); + container.addChild(mask); + + let phase = 0; + + return (delta) => + { + // Update phase + phase += delta / 160; + phase %= Math.PI * 2; + + // Calculate target point. + const x = Math.cos(phase - Math.PI / 2) * size; + const y = Math.sin(phase - Math.PI / 2) * size; + // Line segments + const segments = [ + [-size / 2 + lineSize, -size / 2 + lineSize, size / 2 - lineSize, -size / 2 + lineSize], // top segment + [size / 2 - lineSize, -size / 2 + lineSize, size / 2 - lineSize, size / 2 - lineSize], // right + [-size / 2 + lineSize, size / 2 - lineSize, size / 2 - lineSize, size / 2 - lineSize], // bottom + [-size / 2 + lineSize, -size / 2 + lineSize, -size / 2 + lineSize, size / 2 - lineSize], // left + ]; + // To which dir should mask continue at each segment + let outDir = [ + [0, -1], + [1, 0], + [0, 1], + [-1, 0], + ]; + + // Find the intersecting segment. + let intersection = null; + let winding = 0; + // What direction should the line continue after hit has been found before hitting the line size + + for (let i = 0; i < segments.length; i++) + { + const segment = segments[i]; + const hit = intersect(0, 0, x, y, segment[0], segment[1], segment[2], segment[3]); + + if (hit) + { + intersection = hit; + if (i === 0) winding = hit.x < 0 ? 0 : 4; + else winding = 4 - i; + outDir = outDir[i]; + break; + } + } + + const corners = [ + -size / 2 - lineSize, + -size / 2 - lineSize, // Top left, + -size / 2 - lineSize, + size / 2 + lineSize, // Bottom left + size / 2 + lineSize, + size / 2 + lineSize, // Bottom right + size / 2 + lineSize, + -size / 2 - lineSize, // Top right + ]; + + // Redraw mask + mask.clear() + .moveTo(0, 0) + .moveTo(0, -size / 2 - lineSize); + + // fill the corners + for (let i = 0; i < winding; i++) + { + mask.lineTo(corners[i * 2], corners[i * 2 + 1]); + } + + mask.lineTo(intersection.x + outDir[0] * lineSize * 2, intersection.y + outDir[1] * lineSize * 2) + .lineTo(intersection.x, intersection.y) + .lineTo(0, 0) + .fill({ color: 0xff0000 }); + }; + }; + + /* --------------------- + Spinner 5. Rounded rectangle fixed length spinner by jonlepage + -------------------- */ + const generateSpinner5 = (position) => + { + const container = new Container(); + + container.position = position; + app.stage.addChild(container); + + const halfCircle = new Graphics().arc(0, 0, 100, 0, Math.PI).fill({ color: 0xff0000 }); + + halfCircle.position.set(50, 50); + + const rectangle = new Graphics().roundRect(0, 0, 100, 100, 16).stroke({ width: 2, color: 0xffffff }); + + rectangle.mask = halfCircle; + + container.addChild(rectangle); + container.addChild(halfCircle); + + let phase = 0; + + return (delta) => + { + // Update phase + phase += delta / 6; + phase %= Math.PI * 2; + + halfCircle.rotation = phase; + }; + }; + + const onTick = [ + generateSpinner1(new Point(50, 50)), + generateSpinner2(new Point(160, 50)), + generateSpinner3(new Point(270, 50)), + generateSpinner4(new Point(380, 50)), + generateSpinner5(new Point(490, 50)), + ]; + + // Listen for animate update + app.ticker.add((time) => + { + // Call tick handling for each spinner. + onTick.forEach((cb) => + { + cb(time.deltaTime); + }); + }); + + /** + * Helper functions + + line intercept math by Paul Bourke http://paulbourke.net/geometry/pointlineplane/ + Determine the intersection point of two line segments + Return FALSE if the lines don't intersect + + Code modified from original to match pixi examples linting rules. + */ + function intersect(x1, y1, x2, y2, x3, y3, x4, y4) + { + // Check if none of the lines are of length 0 + if ((x1 === x2 && y1 === y2) || (x3 === x4 && y3 === y4)) + { + return false; + } + + const denominator = (y4 - y3) * (x2 - x1) - (x4 - x3) * (y2 - y1); + + // Lines are parallel + if (denominator === 0) + { + return false; + } + + const ua = ((x4 - x3) * (y1 - y3) - (y4 - y3) * (x1 - x3)) / denominator; + const ub = ((x2 - x1) * (y1 - y3) - (y2 - y1) * (x1 - x3)) / denominator; + + // is the intersection along the segments + if (ua < 0 || ua > 1 || ub < 0 || ub > 1) + { + return false; + } + + // Return a object with the x and y coordinates of the intersection + const x = x1 + ua * (x2 - x1); + const y = y1 + ua * (y2 - y1); + + return { x, y }; + } +})(); diff --git a/src/examples/v8.0.0/advanced/starWarp.js b/src/examples/v8.0.0/advanced/starWarp.js new file mode 100644 index 000000000..6ac7c7ad7 --- /dev/null +++ b/src/examples/v8.0.0/advanced/starWarp.js @@ -0,0 +1,97 @@ +import { Application, Assets, Sprite } from 'pixi.js'; + +(async () => +{ + // Create a new application + const app = new Application(); + + // Initialize the application + await app.init({ resizeTo: window }); + + // Append the application canvas to the document body + document.body.appendChild(app.canvas); + + // Load the star texture + const starTexture = await Assets.load('https://pixijs.com/assets/star.png'); + + const starAmount = 1000; + let cameraZ = 0; + const fov = 20; + const baseSpeed = 0.025; + let speed = 0; + let warpSpeed = 0; + const starStretch = 5; + const starBaseSize = 0.05; + + // Create the stars + const stars = []; + + for (let i = 0; i < starAmount; i++) + { + const star = { + sprite: new Sprite(starTexture), + z: 0, + x: 0, + y: 0, + }; + + star.sprite.anchor.x = 0.5; + star.sprite.anchor.y = 0.7; + randomizeStar(star, true); + app.stage.addChild(star.sprite); + stars.push(star); + } + + function randomizeStar(star, initial) + { + star.z = initial ? Math.random() * 2000 : cameraZ + Math.random() * 1000 + 2000; + + // Calculate star positions with radial random coordinate so no star hits the camera. + const deg = Math.random() * Math.PI * 2; + const distance = Math.random() * 50 + 1; + + star.x = Math.cos(deg) * distance; + star.y = Math.sin(deg) * distance; + } + + // Change flight speed every 5 seconds + setInterval(() => + { + warpSpeed = warpSpeed > 0 ? 0 : 1; + }, 5000); + + // Listen for animate update + app.ticker.add((time) => + { + // Simple easing. This should be changed to proper easing function when used for real. + speed += (warpSpeed - speed) / 20; + cameraZ += time.deltaTime * 10 * (speed + baseSpeed); + for (let i = 0; i < starAmount; i++) + { + const star = stars[i]; + + if (star.z < cameraZ) randomizeStar(star); + + // Map star 3d position to 2d with really simple projection + const z = star.z - cameraZ; + + star.sprite.x = star.x * (fov / z) * app.renderer.screen.width + app.renderer.screen.width / 2; + star.sprite.y = star.y * (fov / z) * app.renderer.screen.width + app.renderer.screen.height / 2; + + // Calculate star scale & rotation. + const dxCenter = star.sprite.x - app.renderer.screen.width / 2; + const dyCenter = star.sprite.y - app.renderer.screen.height / 2; + const distanceCenter = Math.sqrt(dxCenter * dxCenter + dyCenter * dyCenter); + const distanceScale = Math.max(0, (2000 - z) / 2000); + + star.sprite.scale.x = distanceScale * starBaseSize; + // Star is looking towards center so that y axis is towards center. + // Scale the star depending on how fast we are moving, what the stretchfactor is + // and depending on how far away it is from the center. + star.sprite.scale.y + = distanceScale * starBaseSize + + (distanceScale * speed * starStretch * distanceCenter) / app.renderer.screen.width; + star.sprite.rotation = Math.atan2(dyCenter, dxCenter) + Math.PI / 2; + } + }); +})(); diff --git a/src/examples/v8.0.0/assets/async.js b/src/examples/v8.0.0/assets/async.js new file mode 100644 index 000000000..1696dd5c4 --- /dev/null +++ b/src/examples/v8.0.0/assets/async.js @@ -0,0 +1,31 @@ +import { Application, Assets, Sprite } from 'pixi.js'; + +// Await can only be used inside an async function +async function init() +{ + // Create a new application + const app = new Application(); + + // Initialize the application + await app.init({ background: '#1099bb', resizeTo: window }); + + // Append the application canvas to the document body + document.body.appendChild(app.canvas); + + const texture = await Assets.load('https://pixijs.com/assets/bunny.png'); + + // Create a new Sprite from the awaited loaded Texture + const bunny = Sprite.from(texture); + + // Center the sprite's anchor point + bunny.anchor.set(0.5); + + // Move the sprite to the center of the screen + bunny.x = app.screen.width / 2; + bunny.y = app.screen.height / 2; + + app.stage.addChild(bunny); +} + +// Call that async function +init(); diff --git a/src/examples/v8.0.0/assets/background.js b/src/examples/v8.0.0/assets/background.js new file mode 100644 index 000000000..f91faad77 --- /dev/null +++ b/src/examples/v8.0.0/assets/background.js @@ -0,0 +1,43 @@ +import { Application, Assets, Sprite } from 'pixi.js'; + +// Create a new application +const app = new Application(); + +// Initialize the application +app.init({ background: '#1099bb', resizeTo: window }).then(() => +{ + // Append the application canvas to the document body + document.body.appendChild(app.canvas); + + // Add the assets to load + Assets.add({ alias: 'flowerTop', src: 'https://pixijs.com/assets/flowerTop.png' }); + Assets.add({ alias: 'eggHead', src: 'https://pixijs.com/assets/eggHead.png' }); + + // Allow the assets to load in the background + Assets.backgroundLoad(['flowerTop', 'eggHead']); + + // If the background load hasn't loaded this asset yet, calling load forces this asset to load now. + Assets.load('eggHead').then((texture) => + { + // Auxiliar flag for toggling the texture + let isEggHead = true; + + // Create a new Sprite from the resolved loaded texture + const character = new Sprite(texture); + + character.anchor.set(0.5); + character.x = app.screen.width / 2; + character.y = app.screen.height / 2; + character.eventMode = 'static'; + character.cursor = 'pointer'; + + app.stage.addChild(character); + + character.on('pointertap', async () => + { + isEggHead = !isEggHead; + // These promise are already resolved in the cache. + character.texture = await Assets.load(isEggHead ? 'eggHead' : 'flowerTop'); + }); + }); +}); diff --git a/src/examples/v8.0.0-rc/assets/bundle.js b/src/examples/v8.0.0/assets/bundle.js similarity index 56% rename from src/examples/v8.0.0-rc/assets/bundle.js rename to src/examples/v8.0.0/assets/bundle.js index e60ea4b95..f1233ddbb 100644 --- a/src/examples/v8.0.0-rc/assets/bundle.js +++ b/src/examples/v8.0.0/assets/bundle.js @@ -1,20 +1,25 @@ -import * as PIXI from 'pixi.js'; +import { Application, Assets, Sprite } from 'pixi.js'; -const app = new PIXI.Application({ background: '#1099bb', resizeTo: window }); - -document.body.appendChild(app.view); +// Create a new application +const app = new Application(); async function init() { - // manifest example + // Initialize the application + await app.init({ background: '#1099bb', resizeTo: window }); + + // Append the application canvas to the document body + document.body.appendChild(app.canvas); + + // Manifest example const manifestExample = { bundles: [ { name: 'load-screen', assets: [ { - name: 'flowerTop', - srcs: 'https://pixijs.com/assets/flowerTop.png', + alias: 'flowerTop', + src: 'https://pixijs.com/assets/flowerTop.png', }, ], }, @@ -22,30 +27,30 @@ async function init() name: 'game-screen', assets: [ { - name: 'eggHead', - srcs: 'https://pixijs.com/assets/eggHead.png', + alias: 'eggHead', + src: 'https://pixijs.com/assets/eggHead.png', }, ], }, ], }; - await PIXI.Assets.init({ manifest: manifestExample }); + await Assets.init({ manifest: manifestExample }); - // bundles can be loaded in the background too! - PIXI.Assets.backgroundLoadBundle(['load-screen', 'game-screen']); + // Bundles can be loaded in the background too! + Assets.backgroundLoadBundle(['load-screen', 'game-screen']); makeLoadScreen(); } async function makeLoadScreen() { - // get the assets from the load screen bundle. + // Get the assets from the load screen bundle. // If the bundle was already downloaded the promise resolves instantly! - const loadScreenAssets = await PIXI.Assets.loadBundle('load-screen'); + const loadScreenAssets = await Assets.loadBundle('load-screen'); - // create a new Sprite from the resolved loaded texture - const goNext = new PIXI.Sprite(loadScreenAssets.flowerTop); + // Create a new Sprite from the resolved loaded texture + const goNext = new Sprite(loadScreenAssets.flowerTop); goNext.anchor.set(0.5); goNext.x = app.screen.width / 2; @@ -67,10 +72,10 @@ async function makeGameScreen() // Wait here until you get the assets // If the user spends enough time in the load screen by the time they reach the game screen // the assets are completely loaded and the promise resolves instantly! - const loadScreenAssets = await PIXI.Assets.loadBundle('game-screen'); + const loadScreenAssets = await Assets.loadBundle('game-screen'); - // create a new Sprite from the resolved loaded texture - const goBack = new PIXI.Sprite(loadScreenAssets.eggHead); + // Create a new Sprite from the resolved loaded texture + const goBack = new Sprite(loadScreenAssets.eggHead); goBack.anchor.set(0.5); goBack.x = app.screen.width / 2; diff --git a/src/examples/v8.0.0/assets/multiple.js b/src/examples/v8.0.0/assets/multiple.js new file mode 100644 index 000000000..41358878a --- /dev/null +++ b/src/examples/v8.0.0/assets/multiple.js @@ -0,0 +1,37 @@ +import { Application, Assets, Sprite } from 'pixi.js'; + +// Create a new application +const app = new Application(); + +// Initialize the application +app.init({ background: '#1099bb', resizeTo: window }).then(() => +{ + // Append the application canvas to the document body + document.body.appendChild(app.canvas); + + // Add the assets to load + Assets.add({ alias: 'flowerTop', src: 'https://pixijs.com/assets/flowerTop.png' }); + Assets.add({ alias: 'eggHead', src: 'https://pixijs.com/assets/eggHead.png' }); + + // Load the assets and get a resolved promise once both are loaded + const texturesPromise = Assets.load(['flowerTop', 'eggHead']); // => Promise<{flowerTop: Texture, eggHead: Texture}> + + // When the promise resolves, we have the texture! + texturesPromise.then((textures) => + { + // Create a new Sprite from the resolved loaded Textures + const flower = Sprite.from(textures.flowerTop); + + flower.anchor.set(0.5); + flower.x = app.screen.width * 0.25; + flower.y = app.screen.height / 2; + app.stage.addChild(flower); + + const egg = Sprite.from(textures.eggHead); + + egg.anchor.set(0.5); + egg.x = app.screen.width * 0.75; + egg.y = app.screen.height / 2; + app.stage.addChild(egg); + }); +}); diff --git a/src/examples/v8.0.0/assets/promise.js b/src/examples/v8.0.0/assets/promise.js new file mode 100644 index 000000000..edd3d309e --- /dev/null +++ b/src/examples/v8.0.0/assets/promise.js @@ -0,0 +1,32 @@ +import { Application, Assets, Sprite } from 'pixi.js'; + +(async () => +{ + // Create a new application + const app = new Application(); + + // Initialize the application + await app.init({ background: '#1099bb', resizeTo: window }); + + // Append the application canvas to the document body + document.body.appendChild(app.canvas); + + // Start loading right away and create a promise + const texturePromise = Assets.load('https://pixijs.com/assets/bunny.png'); + + // When the promise resolves, we have the texture! + texturePromise.then((resolvedTexture) => + { + // create a new Sprite from the resolved loaded Texture + const bunny = Sprite.from(resolvedTexture); + + // center the sprite's anchor point + bunny.anchor.set(0.5); + + // move the sprite to the center of the screen + bunny.x = app.screen.width / 2; + bunny.y = app.screen.height / 2; + + app.stage.addChild(bunny); + }); +})(); diff --git a/src/examples/v8.0.0/basic/blendModes.js b/src/examples/v8.0.0/basic/blendModes.js new file mode 100644 index 000000000..3dc03bac5 --- /dev/null +++ b/src/examples/v8.0.0/basic/blendModes.js @@ -0,0 +1,104 @@ +import { Application, Assets, Sprite, Rectangle } from 'pixi.js'; + +(async () => +{ + // Create a new application + const app = new Application(); + + // Initialize the application + await app.init({ resizeTo: window }); + + // Append the application canvas to the document body + document.body.appendChild(app.canvas); + + // Load the textures + const bgTexture = await Assets.load('https://pixijs.com/assets/bg_rotate.jpg'); + const alienTexture = await Assets.load('https://pixijs.com/assets/flowerTop.png'); + + // Create a new background sprite + const background = new Sprite(bgTexture); + + background.width = app.screen.width; + background.height = app.screen.height; + app.stage.addChild(background); + + // Create an array to store references to the dudes + const dudeArray = []; + + const totaldudes = 20; + + for (let i = 0; i < totaldudes; i++) + { + // Create a new alien Sprite + const dude = new Sprite(alienTexture); + + dude.anchor.set(0.5); + + // Set a random scale for the dude + dude.scale.set(0.8 + Math.random() * 0.3); + + // Finally let's set the dude to be at a random position... + dude.x = Math.floor(Math.random() * app.screen.width); + dude.y = Math.floor(Math.random() * app.screen.height); + + // The important bit of this example, this is how you change the default blend mode of the sprite + dude.blendMode = 'add'; + + // Create some extra properties that will control movement + dude.direction = Math.random() * Math.PI * 2; + + // This number will be used to modify the direction of the dude over time + dude.turningSpeed = Math.random() - 0.8; + + // Create a random speed for the dude between 0 - 2 + dude.speed = 2 + Math.random() * 2; + + // Finally we push the dude into the dudeArray so it it can be easily accessed later + dudeArray.push(dude); + + app.stage.addChild(dude); + } + + // Create a bounding box for the little dudes + const dudeBoundsPadding = 100; + + const dudeBounds = new Rectangle( + -dudeBoundsPadding, + -dudeBoundsPadding, + app.screen.width + dudeBoundsPadding * 2, + app.screen.height + dudeBoundsPadding * 2, + ); + + app.ticker.add(() => + { + // Iterate through the dudes and update the positions + for (let i = 0; i < dudeArray.length; i++) + { + const dude = dudeArray[i]; + + dude.direction += dude.turningSpeed * 0.01; + dude.x += Math.sin(dude.direction) * dude.speed; + dude.y += Math.cos(dude.direction) * dude.speed; + dude.rotation = -dude.direction - Math.PI / 2; + + // Constrain the dudes' position by testing their bounds... + if (dude.x < dudeBounds.x) + { + dude.x += dudeBounds.width; + } + else if (dude.x > dudeBounds.x + dudeBounds.width) + { + dude.x -= dudeBounds.width; + } + + if (dude.y < dudeBounds.y) + { + dude.y += dudeBounds.height; + } + else if (dude.y > dudeBounds.y + dudeBounds.height) + { + dude.y -= dudeBounds.height; + } + } + }); +})(); diff --git a/src/examples/v8.0.0/basic/container.js b/src/examples/v8.0.0/basic/container.js new file mode 100644 index 000000000..c9ff9506e --- /dev/null +++ b/src/examples/v8.0.0/basic/container.js @@ -0,0 +1,47 @@ +import { Application, Assets, Container, Sprite } from 'pixi.js'; + +(async () => +{ + // Create a new application + const app = new Application(); + + // Initialize the application + await app.init({ background: '#1099bb', resizeTo: window }); + + // Append the application canvas to the document body + document.body.appendChild(app.canvas); + + // Create and add a container to the stage + const container = new Container(); + + app.stage.addChild(container); + + // Load the bunny texture + const texture = await Assets.load('https://pixijs.com/assets/bunny.png'); + + // Create a 5x5 grid of bunnies in the container + for (let i = 0; i < 25; i++) + { + const bunny = new Sprite(texture); + + bunny.x = (i % 5) * 40; + bunny.y = Math.floor(i / 5) * 40; + container.addChild(bunny); + } + + // Move the container to the center + container.x = app.screen.width / 2; + container.y = app.screen.height / 2; + + // Center the bunny sprites in local container coordinates + container.pivot.x = container.width / 2; + container.pivot.y = container.height / 2; + + // Listen for animate update + app.ticker.add((time) => + { + // Continuously rotate the container! + // * use delta to create frame-independent transform * + container.rotation -= 0.01 * time.deltaTime; + }); +})(); diff --git a/src/examples/v8.0.0/basic/fillGradient.js b/src/examples/v8.0.0/basic/fillGradient.js new file mode 100644 index 000000000..51fa8a58c --- /dev/null +++ b/src/examples/v8.0.0/basic/fillGradient.js @@ -0,0 +1,56 @@ +import { Application, FillGradient, Graphics } from 'pixi.js'; + +(async () => +{ + // Create a new application + const app = new Application(); + + // Initialize the application + await app.init({ background: '#1099bb', resizeTo: window }); + + // Append the application canvas to the document body + document.body.appendChild(app.canvas); + + // Create a color array for the linear gradient + const colorStops = [0xffffff, 0xff0000, 0x00ff00, 0x0000ff, 0x000000]; + + // Create a fill gradient + const gradientFill = new FillGradient(0, 0, 150, 150); + + // Add the color stops to the fill gradient + colorStops.forEach((number, index) => + { + const ratio = index / colorStops.length; + + gradientFill.addColorStop(ratio, number); + }); + + // Create a fill graphic + const graphic1 = new Graphics().roundRect(0, 0, 150, 150, 50).fill(gradientFill); + + // Create a stroke graphic + const graphic2 = new Graphics().roundRect(0, 0, 150, 150, 50).stroke({ width: 20, fill: gradientFill }); + + graphic1.pivot.set(75, 75); + graphic1.x = 150; + graphic1.y = 200; + + graphic2.x = 350; + graphic2.y = 125; + + app.stage.addChild(graphic1); + app.stage.addChild(graphic2); + + let tick = 0; + + // Animate the graphics + app.ticker.add(() => + { + tick += 0.025; + graphic1.rotation += 0.01; + graphic2 + .clear() + .roundRect(0, 0, 150, 150, 50) + .stroke({ width: Math.sin(tick) * 100, fill: gradientFill }); + }); +})(); diff --git a/src/examples/v8.0.0/basic/meshPlane.js b/src/examples/v8.0.0/basic/meshPlane.js new file mode 100644 index 000000000..4e1ef63d5 --- /dev/null +++ b/src/examples/v8.0.0/basic/meshPlane.js @@ -0,0 +1,41 @@ +import { Application, MeshPlane, Assets } from 'pixi.js'; + +(async () => +{ + // Create a new application + const app = new Application(); + + // Initialize the application + await app.init({ background: '#1099bb', resizeTo: window }); + + // Append the application canvas to the document body + document.body.appendChild(app.canvas); + + // Load the grass texture + const texture = await Assets.load('https://pixijs.com/assets/bg_grass.jpg'); + + // Create a simple grass plane and add it to the stage + const plane = new MeshPlane({ texture, verticesX: 10, verticesY: 10 }); + + plane.x = 100; + plane.y = 100; + + app.stage.addChild(plane); + + // Get the buffer for vertex positions. + const { buffer } = plane.geometry.getAttribute('aPosition'); + + // Listen for animate update + let timer = 0; + + app.ticker.add(() => + { + // Randomize the vertice positions a bit to create movement. + for (let i = 0; i < buffer.data.length; i++) + { + buffer.data[i] += Math.sin(timer / 10 + i) * 0.5; + } + buffer.update(); + timer++; + }); +})(); diff --git a/src/examples/v8.0.0/basic/particleContainer.js b/src/examples/v8.0.0/basic/particleContainer.js new file mode 100644 index 000000000..f37c0d097 --- /dev/null +++ b/src/examples/v8.0.0/basic/particleContainer.js @@ -0,0 +1,108 @@ +import { Application, Assets, Sprite, Container, Rectangle } from 'pixi.js'; + +(async () => +{ + // Create a new application + const app = new Application(); + + // Initialize the application + await app.init({ background: '#1099bb', resizeTo: window }); + + // Append the application canvas to the document body + document.body.appendChild(app.canvas); + + // Load the maggot texture + const texture = await Assets.load('https://pixijs.com/assets/maggot_tiny.png'); + + // Create a container for all the maggots particles and add it to the stage + const sprites = new Container(); + + app.stage.addChild(sprites); + + // Create an array to store all the sprites + const maggots = []; + + const totalSprites = 10000; + + for (let i = 0; i < totalSprites; i++) + { + // Create a new maggot Sprite + const dude = new Sprite(texture); + + // Set the anchor point so the texture is centerd on the sprite + dude.anchor.set(0.5); + + // Different maggots, different sizes + dude.scale.set(0.8 + Math.random() * 0.3); + + // Scatter them all + dude.x = Math.random() * app.screen.width; + dude.y = Math.random() * app.screen.height; + + dude.tint = Math.random() * 0x808080; + + // Create a random direction in radians + dude.direction = Math.random() * Math.PI * 2; + + // This number will be used to modify the direction of the sprite over time + dude.turningSpeed = Math.random() - 0.8; + + // Create a random speed between 0 - 2, and these maggots are slooww + dude.speed = (2 + Math.random() * 2) * 0.2; + + dude.offset = Math.random() * 100; + + // Finally we push the dude into the maggots array so it it can be easily accessed later + maggots.push(dude); + + sprites.addChild(dude); + } + + // Create a bounding box box for the little maggots + const dudeBoundsPadding = 100; + const dudeBounds = new Rectangle( + -dudeBoundsPadding, + -dudeBoundsPadding, + app.screen.width + dudeBoundsPadding * 2, + app.screen.height + dudeBoundsPadding * 2, + ); + + let tick = 0; + + app.ticker.add(() => + { + // Iterate through the sprites and update their position + for (let i = 0; i < maggots.length; i++) + { + const dude = maggots[i]; + + dude.scale.y = 0.95 + Math.sin(tick + dude.offset) * 0.05; + dude.direction += dude.turningSpeed * 0.01; + dude.x += Math.sin(dude.direction) * (dude.speed * dude.scale.y); + dude.y += Math.cos(dude.direction) * (dude.speed * dude.scale.y); + dude.rotation = -dude.direction + Math.PI; + + // Wrap the maggots + if (dude.x < dudeBounds.x) + { + dude.x += dudeBounds.width; + } + else if (dude.x > dudeBounds.x + dudeBounds.width) + { + dude.x -= dudeBounds.width; + } + + if (dude.y < dudeBounds.y) + { + dude.y += dudeBounds.height; + } + else if (dude.y > dudeBounds.y + dudeBounds.height) + { + dude.y -= dudeBounds.height; + } + } + + // Increment the ticker + tick += 0.1; + }); +})(); diff --git a/src/examples/v8.0.0/basic/tinting.js b/src/examples/v8.0.0/basic/tinting.js new file mode 100644 index 000000000..56c00684a --- /dev/null +++ b/src/examples/v8.0.0/basic/tinting.js @@ -0,0 +1,98 @@ +import { Application, Assets, Sprite, Rectangle } from 'pixi.js'; + +(async () => +{ + // Create a new application + const app = new Application(); + + // Initialize the application + await app.init({ resizeTo: window }); + + // Append the application canvas to the document body + document.body.appendChild(app.canvas); + + // Load the alien texture + const texture = await Assets.load('https://pixijs.com/assets/eggHead.png'); + + // Create an array to store the aliens + const aliens = []; + + const totalDudes = 20; + + for (let i = 0; i < totalDudes; i++) + { + // Create a new alien Sprite + const dude = new Sprite(texture); + + // Set the anchor point so the texture is centered on the sprite + dude.anchor.set(0.5); + + // Set a random scale for the dude - no point them all being the same size! + dude.scale.set(0.8 + Math.random() * 0.3); + + // Finally lets set the dude to be at a random position.. + dude.x = Math.random() * app.screen.width; + dude.y = Math.random() * app.screen.height; + + dude.tint = Math.random() * 0xffffff; + + // Create some extra properties that will control movement: --------------------- + + // Create a random direction in radians. + // This is a number between 0 and PI*2 which is the equivalent of 0 - 360 degrees + dude.direction = Math.random() * Math.PI * 2; + + // This number will be used to modify the direction of the dude over time + dude.turningSpeed = Math.random() - 0.8; + + // Create a random speed for the dude between 2 - 4 + dude.speed = 2 + Math.random() * 2; + + // Finally we push the dude into the aliens array so it it can be easily accessed later + aliens.push(dude); + + app.stage.addChild(dude); + } + + // Create a bounding box for the little dudes + const dudeBoundsPadding = 100; + const dudeBounds = new Rectangle( + -dudeBoundsPadding, + -dudeBoundsPadding, + app.screen.width + dudeBoundsPadding * 2, + app.screen.height + dudeBoundsPadding * 2, + ); + + app.ticker.add(() => + { + // Iterate through the dudes and update their position + for (let i = 0; i < aliens.length; i++) + { + const dude = aliens[i]; + + dude.direction += dude.turningSpeed * 0.01; + dude.x += Math.sin(dude.direction) * dude.speed; + dude.y += Math.cos(dude.direction) * dude.speed; + dude.rotation = -dude.direction - Math.PI / 2; + + // Constrain the dudes' position by testing their bounds... + if (dude.x < dudeBounds.x) + { + dude.x += dudeBounds.width; + } + else if (dude.x > dudeBounds.x + dudeBounds.width) + { + dude.x -= dudeBounds.width; + } + + if (dude.y < dudeBounds.y) + { + dude.y += dudeBounds.height; + } + else if (dude.y > dudeBounds.y + dudeBounds.height) + { + dude.y -= dudeBounds.height; + } + } + }); +})(); diff --git a/src/examples/v8.0.0/basic/transparentBackground.js b/src/examples/v8.0.0/basic/transparentBackground.js new file mode 100644 index 000000000..407c328c3 --- /dev/null +++ b/src/examples/v8.0.0/basic/transparentBackground.js @@ -0,0 +1,35 @@ +import { Application, Assets, Sprite } from 'pixi.js'; + +(async () => +{ + // Create a new application + const app = new Application(); + + // Initialize the application with a transparent background + await app.init({ backgroundAlpha: 0, resizeTo: window }); + + // Append the application canvas to the document body + document.body.appendChild(app.canvas); + + // Load the bunny texture + const texture = await Assets.load('https://pixijs.com/assets/bunny.png'); + + // Create a new Sprite with the texture + const bunny = new Sprite(texture); + + // Center the sprite's anchor point + bunny.anchor.set(0.5); + + // Move the sprite to the center of the screen + bunny.x = app.screen.width / 2; + bunny.y = app.screen.height / 2; + + app.stage.addChild(bunny); + + // Listen for animate update + app.ticker.add(() => + { + // Just for fun, let's rotate our bunny over time! + bunny.rotation += 0.1; + }); +})(); diff --git a/src/examples/v8.0.0/events/click.js b/src/examples/v8.0.0/events/click.js new file mode 100644 index 000000000..d7fd0ce3a --- /dev/null +++ b/src/examples/v8.0.0/events/click.js @@ -0,0 +1,48 @@ +import { Application, Assets, Sprite, settings, SCALE_MODES } from 'pixi.js'; + +(async () => +{ + // Create a new application + const app = new Application(); + + // Initialize the application + await app.init({ background: '#1099bb', resizeTo: window }); + + // Append the application canvas to the document body + document.body.appendChild(app.canvas); + + // Load the bunny texture + const texture = await Assets.load('https://pixijs.com/assets/bunny.png'); + + // Set the texture's scale mode to nearest to preserve pixelation + texture.baseTexture.scaleMode = SCALE_MODES.NEAREST; + + // Create the bunny sprite + const sprite = Sprite.from(texture); + + // Set the initial position + sprite.anchor.set(0.5); + sprite.x = app.screen.width / 2; + sprite.y = app.screen.height / 2; + + // Opt-in to interactivity + sprite.eventMode = 'static'; + + // Shows hand cursor + sprite.cursor = 'pointer'; + + // Pointers normalize touch and mouse (good for mobile and desktop) + sprite.on('pointerdown', onClick); + + // Alternatively, use the mouse & touch events: + // sprite.on('click', onClick); // mouse-only + // sprite.on('tap', onClick); // touch-only + + app.stage.addChild(sprite); + + function onClick() + { + sprite.scale.x *= 1.25; + sprite.scale.y *= 1.25; + } +})(); diff --git a/src/examples/v8.0.0/events/customHitarea.js b/src/examples/v8.0.0/events/customHitarea.js new file mode 100644 index 000000000..c1359ca73 --- /dev/null +++ b/src/examples/v8.0.0/events/customHitarea.js @@ -0,0 +1,131 @@ +import { Application, Assets, Sprite, Graphics, Polygon, Text, TextStyle } from 'pixi.js'; + +(async () => +{ + // Create a new application + const app = new Application(); + + // Initialize the application + await app.init({ background: '#1099bb', resizeTo: window }); + + // Append the application canvas to the document body + document.body.appendChild(app.canvas); + + // Load the star texture + const starTexture = await Assets.load('https://pixijs.com/assets/yellowstar.png'); + + // Standard Sprite Button + const starButton1 = new Sprite(starTexture); + + starButton1.position.set(50, 200); + starButton1.cursor = 'pointer'; + starButton1.eventMode = 'static'; + + starButton1 + .on('pointerdown', onClick, starButton1) + .on('pointerover', onPointerOver, starButton1) + .on('pointerout', onPointerOut, starButton1); + + // Custom Hitarea Button + const starButton2 = new Sprite(starTexture); + + starButton2.position.set(250, 200); + + // Create a hitarea that matches the sprite, which will be used for point intersection + starButton2.hitArea = new Polygon([80, 0, 100, 50, 160, 55, 115, 95, 130, 150, 80, 120, 30, 150, 45, 95, 0, 55, 60, 50]); + starButton2.cursor = 'pointer'; + starButton2.eventMode = 'static'; + + starButton2 + .on('pointerdown', onClick, starButton2) + .on('pointerover', onPointerOver, starButton2) + .on('pointerout', onPointerOut, starButton2); + + // With Mask, No Hit Area + const starButton3 = new Sprite(starTexture); + + starButton3.position.set(450, 200); + starButton3.cursor = 'pointer'; + starButton3.eventMode = 'static'; + + const squareMask = new Graphics().rect(starButton3.x, starButton3.y, 75, 200).fill({ color: 0xffffff }); + + starButton3.mask = squareMask; + + starButton3 + .on('pointerdown', onClick, starButton3) + .on('pointerover', onPointerOver, starButton3) + .on('pointerout', onPointerOut, starButton3); + + // With a Mask and Hit Area + // Hitareas ignore masks. You can still click on a button made in this way, + // even from areas covered by a mask + const starButton4 = new Sprite(starTexture); + + starButton4.position.set(600, 200); + + const squareMask2 = new Graphics().rect(starButton4.x, starButton4.y, 75, 200).fill({ color: 0xffffff }); + + starButton4.mask = squareMask2; + + // Again, hitarea for intersection checks + starButton4.hitArea = new Polygon([80, 0, 100, 50, 160, 55, 115, 95, 130, 150, 80, 120, 30, 150, 45, 95, 0, 55, 60, 50]); + starButton4.cursor = 'pointer'; + starButton4.eventMode = 'static'; + + starButton4 + .on('pointerdown', onClick, starButton4) + .on('pointerover', onPointerOver, starButton4) + .on('pointerout', onPointerOut, starButton4); + + const style = new TextStyle({ fill: '#ffffff' }); + + const text1 = new Text({ text: 'Standard', style }); + + text1.x = starButton1.x + 25; + text1.y = starButton1.y + 170; + + const text2 = new Text({ text: 'Hit Area', style }); + + text2.x = starButton2.x + 35; + text2.y = starButton2.y + 170; + + const text3 = new Text({ text: 'Mask', style }); + + text3.x = starButton3.x + 10; + text3.y = starButton3.y + 170; + + const text4 = new Text({ text: 'Mask + Hit Area', style }); + + text4.x = starButton4.x - 10; + text4.y = starButton4.y + 170; + + // Add to stage + app.stage.addChild( + starButton2, + starButton1, + starButton3, + starButton4, + squareMask, + squareMask2, + text1, + text2, + text3, + text4, + ); + + function onClick() + { + this.tint = 0x333333; + } + + function onPointerOver() + { + this.tint = 0x666666; + } + + function onPointerOut() + { + this.tint = 0xffffff; + } +})(); diff --git a/src/examples/v8.0.0/events/customMouseIcon.js b/src/examples/v8.0.0/events/customMouseIcon.js new file mode 100644 index 000000000..74a949c8e --- /dev/null +++ b/src/examples/v8.0.0/events/customMouseIcon.js @@ -0,0 +1,121 @@ +import { Application, Assets, Sprite, Texture } from 'pixi.js'; + +(async () => +{ + // Create a new application + const app = new Application(); + + // Initialize the application + await app.init({ background: '#1099bb', resizeTo: window }); + + // Append the application canvas to the document body + document.body.appendChild(app.canvas); + + // CSS style for icons + const defaultIcon = 'url(\'https://pixijs.com/assets/bunny.png\'),auto'; + const hoverIcon = 'url(\'https://pixijs.com/assets/bunny_saturated.png\'),auto'; + + // Load textures + await Assets.load([ + 'https://pixijs.com/assets/bg_button.jpg', + 'https://pixijs.com/assets/button.png', + 'https://pixijs.com/assets/button_down.png', + 'https://pixijs.com/assets/button_over.png', + ]); + + // Add custom cursor styles + app.renderer.events.cursorStyles.default = defaultIcon; + app.renderer.events.cursorStyles.hover = hoverIcon; + + // Create a background... + const background = Sprite.from('https://pixijs.com/assets/bg_button.jpg'); + + background.width = app.screen.width; + background.height = app.screen.height; + + // Add background to stage... + app.stage.addChild(background); + + // Create some textures from an image path + const textureButton = Texture.from('https://pixijs.com/assets/button.png'); + const textureButtonDown = Texture.from('https://pixijs.com/assets/button_down.png'); + const textureButtonOver = Texture.from('https://pixijs.com/assets/button_over.png'); + + const buttons = []; + + const buttonPositions = [175, 75, 655, 75, 410, 325, 150, 465, 685, 445]; + + for (let i = 0; i < 5; i++) + { + const button = new Sprite(textureButton); + + button.cursor = 'hover'; + + button.anchor.set(0.5); + button.x = buttonPositions[i * 2]; + button.y = buttonPositions[i * 2 + 1]; + + // Make the button interactive... + button.eventMode = 'static'; + + button + .on('pointerdown', onButtonDown) + .on('pointerup', onButtonUp) + .on('pointerupoutside', onButtonUp) + .on('pointerover', onButtonOver) + .on('pointerout', onButtonOut); + + // Add it to the stage + app.stage.addChild(button); + + // Add button to array + buttons.push(button); + } + + // Set some silly values... + buttons[0].scale.set(1.2); + buttons[2].rotation = Math.PI / 10; + buttons[3].scale.set(0.8); + buttons[4].scale.set(0.8, 1.2); + buttons[4].rotation = Math.PI; + + function onButtonDown() + { + this.isdown = true; + this.texture = textureButtonDown; + this.alpha = 1; + } + + function onButtonUp() + { + this.isdown = false; + if (this.isOver) + { + this.texture = textureButtonOver; + } + else + { + this.texture = textureButton; + } + } + + function onButtonOver() + { + this.isOver = true; + if (this.isdown) + { + return; + } + this.texture = textureButtonOver; + } + + function onButtonOut() + { + this.isOver = false; + if (this.isdown) + { + return; + } + this.texture = textureButton; + } +})(); diff --git a/src/examples/v8.0.0/events/dragging.js b/src/examples/v8.0.0/events/dragging.js new file mode 100644 index 000000000..35288a5e1 --- /dev/null +++ b/src/examples/v8.0.0/events/dragging.js @@ -0,0 +1,87 @@ +import { Application, Assets, Sprite, SCALE_MODES } from 'pixi.js'; + +(async () => +{ + // Create a new application + const app = new Application(); + + // Initialize the application + await app.init({ background: '#1099bb', resizeTo: window }); + + // Append the application canvas to the document body + document.body.appendChild(app.canvas); + + // Load the bunny texture + const texture = await Assets.load('https://pixijs.com/assets/bunny.png'); + + // Set the texture's scale mode to nearest to preserve pixelation + texture.baseTexture.scaleMode = SCALE_MODES.NEAREST; + + for (let i = 0; i < 10; i++) + { + createBunny(Math.floor(Math.random() * app.screen.width), Math.floor(Math.random() * app.screen.height)); + } + + function createBunny(x, y) + { + // Create our little bunny friend.. + const bunny = new Sprite(texture); + + // Enable the bunny to be interactive... this will allow it to respond to mouse and touch events + bunny.eventMode = 'static'; + + // This button mode will mean the hand cursor appears when you roll over the bunny with your mouse + bunny.cursor = 'pointer'; + + // Center the bunny's anchor point + bunny.anchor.set(0.5); + + // Make it a bit bigger, so it's easier to grab + bunny.scale.set(3); + + // Setup events for mouse + touch using the pointer events + bunny.on('pointerdown', onDragStart, bunny); + + // Move the sprite to its designated position + bunny.x = x; + bunny.y = y; + + // Add it to the stage + app.stage.addChild(bunny); + } + + let dragTarget = null; + + app.stage.eventMode = 'static'; + app.stage.hitArea = app.screen; + app.stage.on('pointerup', onDragEnd); + app.stage.on('pointerupoutside', onDragEnd); + + function onDragMove(event) + { + if (dragTarget) + { + dragTarget.parent.toLocal(event.global, null, dragTarget.position); + } + } + + function onDragStart() + { + // Store a reference to the data + // * The reason for this is because of multitouch * + // * We want to track the movement of this particular touch * + this.alpha = 0.5; + dragTarget = this; + app.stage.on('pointermove', onDragMove); + } + + function onDragEnd() + { + if (dragTarget) + { + app.stage.off('pointermove', onDragMove); + dragTarget.alpha = 1; + dragTarget = null; + } + } +})(); diff --git a/src/examples/v8.0.0-rc/events/hitTestingWithSpatialHash.js b/src/examples/v8.0.0/events/hitTestingWithSpatialHash.js similarity index 100% rename from src/examples/v8.0.0-rc/events/hitTestingWithSpatialHash.js rename to src/examples/v8.0.0/events/hitTestingWithSpatialHash.js diff --git a/src/examples/v8.0.0/events/interactivity.js b/src/examples/v8.0.0/events/interactivity.js new file mode 100644 index 000000000..d3a9f7b10 --- /dev/null +++ b/src/examples/v8.0.0/events/interactivity.js @@ -0,0 +1,127 @@ +import { Application, Assets, Sprite, Texture } from 'pixi.js'; + +(async () => +{ + // Create a new application + const app = new Application(); + + // Initialize the application + await app.init({ resizeTo: window }); + + // Append the application canvas to the document body + document.body.appendChild(app.canvas); + + // Load textures + await Assets.load([ + 'https://pixijs.com/assets/bg_button.jpg', + 'https://pixijs.com/assets/button.png', + 'https://pixijs.com/assets/button_down.png', + 'https://pixijs.com/assets/button_over.png', + ]); + + // Create a background... + const background = Sprite.from('https://pixijs.com/assets/bg_button.jpg'); + + background.width = app.screen.width; + background.height = app.screen.height; + + // Add background to stage... + app.stage.addChild(background); + + // Create some textures from an image path + const textureButton = Texture.from('https://pixijs.com/assets/button.png'); + const textureButtonDown = Texture.from('https://pixijs.com/assets/button_down.png'); + const textureButtonOver = Texture.from('https://pixijs.com/assets/button_over.png'); + + const buttons = []; + + const buttonPositions = [175, 75, 655, 75, 410, 325, 150, 465, 685, 445]; + + for (let i = 0; i < 5; i++) + { + const button = new Sprite(textureButton); + + button.anchor.set(0.5); + button.x = buttonPositions[i * 2]; + button.y = buttonPositions[i * 2 + 1]; + + // Make the button interactive... + button.eventMode = 'static'; + button.cursor = 'pointer'; + + button + // Mouse & touch events are normalized into + // the pointer* events for handling different + // button events. + .on('pointerdown', onButtonDown) + .on('pointerup', onButtonUp) + .on('pointerupoutside', onButtonUp) + .on('pointerover', onButtonOver) + .on('pointerout', onButtonOut); + + // Use mouse-only events + // .on('mousedown', onButtonDown) + // .on('mouseup', onButtonUp) + // .on('mouseupoutside', onButtonUp) + // .on('mouseover', onButtonOver) + // .on('mouseout', onButtonOut) + + // Use touch-only events + // .on('touchstart', onButtonDown) + // .on('touchend', onButtonUp) + // .on('touchendoutside', onButtonUp) + + // Add it to the stage + app.stage.addChild(button); + + // Add button to array + buttons.push(button); + } + + // Set some silly values... + buttons[0].scale.set(1.2); + buttons[2].rotation = Math.PI / 10; + buttons[3].scale.set(0.8); + buttons[4].scale.set(0.8, 1.2); + buttons[4].rotation = Math.PI; + + function onButtonDown() + { + this.isdown = true; + this.texture = textureButtonDown; + this.alpha = 1; + } + + function onButtonUp() + { + this.isdown = false; + if (this.isOver) + { + this.texture = textureButtonOver; + } + else + { + this.texture = textureButton; + } + } + + function onButtonOver() + { + this.isOver = true; + if (this.isdown) + { + return; + } + this.texture = textureButtonOver; + } + + function onButtonOut() + { + this.isOver = false; + if (this.isdown) + { + return; + } + this.texture = textureButton; + } +})(); diff --git a/src/examples/v8.0.0/events/logger.js b/src/examples/v8.0.0/events/logger.js new file mode 100644 index 000000000..e0cb5bef2 --- /dev/null +++ b/src/examples/v8.0.0/events/logger.js @@ -0,0 +1,93 @@ +import { Application, Assets, Text, Graphics } from 'pixi.js'; + +(async () => +{ + // Create a new application + const app = new Application(); + + // Initialize the application + await app.init({ antialias: true, background: '#1099bb', resizeTo: window }); + + // Append the application canvas to the document body + document.body.appendChild(app.canvas); + + const title = app.stage.addChild( + new Text({ + text: `Move your mouse slowly over the boxes to + see the order of pointerenter, pointerleave, + pointerover, pointerout events on each target!`, + style: { + fontSize: 16, + }, + }), + ); + + title.x = 2; + + const logs = []; + const logText = app.stage.addChild( + new Text({ + text: '', + style: { + fontSize: 14, + }, + }), + ); + + logText.y = 80; + logText.x = 2; + + app.stage.name = 'stage'; + + // Mount outer black box + const blackBox = app.stage.addChild(new Graphics().rect(0, 0, 400, 400).fill({ color: 0 })); + + blackBox.name = 'black box'; + blackBox.x = 400; + + // Mount white box inside the white one + const whiteBox = blackBox.addChild(new Graphics().rect(100, 100, 200, 200).fill({ color: 0xffffff })); + + whiteBox.name = 'white box'; + + // Enable interactivity everywhere! + app.stage.eventMode = 'static'; + app.stage.hitArea = app.screen; + whiteBox.eventMode = 'static'; + blackBox.eventMode = 'static'; + + function onEvent(e) + { + const type = e.type; + const targetName = e.target.name; + const currentTargetName = e.currentTarget.name; + + // Add event to top of logs + logs.push(`${currentTargetName} received ${type} event (target is ${targetName})`); + + if (currentTargetName === 'stage' || type === 'pointerenter' || type === 'pointerleave') + { + logs.push('-----------------------------------------', ''); + } + + // Prevent logs from growing too long + if (logs.length > 30) + { + while (logs.length > 30) + { + logs.shift(); + } + } + + // Update logText + logText.text = logs.join('\n'); + } + + [app.stage, whiteBox, blackBox].forEach((object) => + { + object.addEventListener('pointerenter', onEvent); + object.addEventListener('pointerleave', onEvent); + object.addEventListener('pointerover', onEvent); + object.addEventListener('pointerout', onEvent); + }); +})(); diff --git a/src/examples/v8.0.0/events/nestedBoundaryWithProjection.js b/src/examples/v8.0.0/events/nestedBoundaryWithProjection.js new file mode 100644 index 000000000..f35c97567 --- /dev/null +++ b/src/examples/v8.0.0/events/nestedBoundaryWithProjection.js @@ -0,0 +1,230 @@ +import { Application, Container, Sprite, Matrix, EventBoundary, Graphics, Rectangle, Text } from 'pixi.js'; + +// This example shows how you can setup a nested boundary to propagate events +// into a disjoint scene graph. Here, a camera is used to project an different +// world onto the canvas. + +// A projector renders it's content using projection. The transforms in +// the contents scene graph don't change if you move the camera. To achieve +// this, the content is not added as a "child" to the projector; however, this +// means events won't propagate into the content by default. +// +// To solve this, we nest our own EventBoundary, and connect it using +// addEventListener! +class Projector extends Container +{ + constructor() + { + super(); + + // The content root to be rendered by this camera. + this.content = new Container(); + + // Temporary matrix to store the original projection transform. + this.originalTransform = new Matrix(); + + // The event boundary that'll map events downstream into the content + // scene. + this.boundary = new EventBoundary(this.content); + + // Override copyMouseData to apply inverse worldTransform on + // global coords + this.boundary.copyMouseData = (from, to) => + { + // Apply default implementation first + EventBoundary.prototype.copyMouseData.call(this.boundary, from, to); + + // Then bring global coords into content's world + this.worldTransform.applyInverse(to.global, to.global); + }; + + // Propagate these events down into the content's scene graph! + ['pointerdown', 'pointerup', 'pointermove', 'pointerover', 'pointerout', 'wheel'].forEach((event) => + { + this.addEventListener(event, (e) => this.boundary.mapEvent(e)); + }); + + this.eventMode = 'static'; + } + + // Pass through cursor + get cursor() + { + return this.boundary.cursor; + } + + // eslint-disable-next-line class-methods-use-this + set cursor(value) + { + throw new Error('The camera\'s cursor is derived from its content!'); + } + + // Pass through calculateBounds + calculateBounds() + { + const contentBounds = this.content.getBounds(); + + this._bounds.addFrameMatrix( + this.worldTransform, + contentBounds.x, + contentBounds.y, + contentBounds.width, + contentBounds.height, + ); + } + + // Pass through containsPoint + containsPoint(point) + { + return !!this.boundary.hitTest(point.x, point.y); + } + + // Render content with projection + render(renderer) + { + renderer.batch.flush(); + + const projectionSystem = renderer.projection; + const renderTextureSystem = renderer.renderTexture; + + projectionSystem.transform = projectionSystem.transform || new Matrix(); + projectionSystem.transform.copyTo(this.originalTransform); + projectionSystem.transform.append(this.worldTransform); + projectionSystem.update(null, null, 1, !renderTextureSystem.current); + + this.content.render(renderer); + + renderer.batch.flush(); + + projectionSystem.transform.copyFrom(this.originalTransform); + projectionSystem.update(null, null, 1, !renderTextureSystem.current); + } + + // updateTransform also updates content's transform + updateTransform() + { + super.updateTransform(); + + this.content.enableTempParent(); + this.content.updateTransform(); + this.content.disableTempParent(null); + } +} + +(async () => +{ + // Create a new application + const app = new Application(); + + // Initialize the application + await app.init({ antialias: true, background: '#1099bb', resizeTo: window }); + + // Append the application canvas to the document body + document.body.appendChild(app.canvas); + + // The projector + const projector = app.stage.addChild(new Projector()); + + // Add coordinate axes! + projector.content.addChild( + new Graphics() + .moveTo(0, -300) + .lineTo(0, 600) + .moveTo(-100, 0) + .lineTo(700, 0) + .stroke({ color: 0, alpha: 0.2, width: 2 }), + ); + + // Construct the star Graphics + const stars = [1, 2, 3].map((i) => + new Graphics().star(0, 0, 18 / i, (100 * i) / 2).fill({ color: 0xffffff, alpha: 0.75 }), + ); + + // Place the stars + stars[0].x = 0; + stars[1].x = 200; + stars[2].x = 500; + + // Add stars to the projector + projector.content.addChild(...stars); + + // Make projection x+100, y+300 + projector.x = 100; + projector.y = 300; + projector.content.hitArea = new Rectangle(-100, -300, app.screen.width, app.screen.height); + // Make hit-area cover the whole screen so we can capture + // pointermove everywhere! + projector.hitArea = projector.content.hitArea; + projector.content.eventMode = 'static'; + + // Make stars interactive & add wheel handlers + stars.forEach((star) => + { + // Make star interactive + star.eventMode = 'static'; + + // Set initial cursor + star.cursor = 'zoom-in'; + + // Add wheel rotation feedback + star.addEventListener('wheel', (e) => + { + const scroll = Math.sign(e.deltaY) * Math.min(15, Math.abs(e.deltaY)); + + star.rotation += scroll / 100; + }); + + // Add click zoom-in/zoom-out handler + star.addEventListener('click', (e) => + { + if (star.scale.x === 1) + { + star.scale.set(1.33); + star.cursor = 'zoom-out'; + } + else + { + star.scale.set(1); + star.cursor = 'zoom-in'; + } + }); + }); + + const coordinates = new Text({ + text: 'Global: (0, 0)\nScreen: (0, 0)', + style: { + fontSize: 16, + fontFamily: 'Roboto', + fill: '#272d37', + }, + }); + + coordinates.x = 110; + coordinates.y = 550; + + app.stage.addChild(coordinates); + + projector.content.addEventListener('pointermove', (e) => + { + const global = `(${e.global.x | 0}, ${e.global.y | 0})`; + const screen = `(${e.screen.x | 0}, ${e.screen.y | 0})`; + + coordinates.text = `Global: ${global}\nScreen: ${screen}`; + }); + + const description = new Text({ + text: + 'The (0, 0) world coordinates for the content is located at the center of the first star!' + + '\n * Mouse wheel over stars to rotate them' + + '\n * Click to zoom in or out', + style: { + fontSize: 16, + fontFamily: 'Roboto', + fill: '#272d37', + }, + }); + + description.position.set(110, 12); + + app.stage.addChild(description); +})(); diff --git a/src/examples/v8.0.0/events/pointerTracker.js b/src/examples/v8.0.0/events/pointerTracker.js new file mode 100644 index 000000000..aaf48d5f0 --- /dev/null +++ b/src/examples/v8.0.0/events/pointerTracker.js @@ -0,0 +1,32 @@ +import { Application, Graphics } from 'pixi.js'; + +(async () => +{ + // Create a new application + const app = new Application(); + + // Initialize the application + await app.init({ antialias: true, background: '#1099bb', resizeTo: window }); + + // Append the application canvas to the document body + document.body.appendChild(app.canvas); + + // Create the circle + const circle = app.stage.addChild( + new Graphics().circle(0, 0, 8).fill({ color: 0xffffff }).stroke({ color: 0x111111, alpha: 0.87, width: 1 }), + ); + + circle.position.set(app.screen.width / 2, app.screen.height / 2); + + // Enable interactivity! + app.stage.eventMode = 'static'; + + // Make sure the whole canvas area is interactive, not just the circle. + app.stage.hitArea = app.screen; + + // Follow the pointer + app.stage.addEventListener('pointermove', (e) => + { + circle.position.copyFrom(e.global); + }); +})(); diff --git a/src/examples/v8.0.0/events/slider.js b/src/examples/v8.0.0/events/slider.js new file mode 100644 index 000000000..12b5ec805 --- /dev/null +++ b/src/examples/v8.0.0/events/slider.js @@ -0,0 +1,95 @@ +import { Application, Assets, Text, Graphics, Sprite, SCALE_MODES } from 'pixi.js'; + +(async () => +{ + // Create a new application + const app = new Application(); + + // Initialize the application + await app.init({ antialias: true, background: '#1099bb', resizeTo: window }); + + // Append the application canvas to the document body + document.body.appendChild(app.canvas); + + const stageHeight = app.screen.height; + const stageWidth = app.screen.width; + + // Make sure stage covers the whole scene + app.stage.hitArea = app.screen; + + // Make the slider + const sliderWidth = 320; + const slider = new Graphics().rect(0, 0, sliderWidth, 4).fill({ color: 0x272d37 }); + + slider.x = (stageWidth - sliderWidth) / 2; + slider.y = stageHeight * 0.75; + + // Draw the handle + const handle = new Graphics().circle(0, 0, 8).fill({ color: 0xffffff }); + + handle.y = slider.height / 2; + handle.x = sliderWidth / 2; + handle.eventMode = 'static'; + handle.cursor = 'pointer'; + + handle.on('pointerdown', onDragStart).on('pointerup', onDragEnd).on('pointerupoutside', onDragEnd); + + app.stage.addChild(slider); + slider.addChild(handle); + + // Load the bunny texture + const texture = await Assets.load('https://pixijs.com/assets/bunny.png'); + + // Add bunny whose scale can be changed by user using slider + const bunny = app.stage.addChild(Sprite.from(texture)); + + bunny.texture.baseTexture.scaleMode = SCALE_MODES.NEAREST; + bunny.scale.set(3); + bunny.anchor.set(0.5); + bunny.x = stageWidth / 2; + bunny.y = stageHeight / 2; + + // Add title + const title = new Text({ + text: 'Drag the handle to change the scale of bunny.', + style: { + fill: '#272d37', + fontFamily: 'Roboto', + fontSize: 20, + align: 'center', + }, + }); + + title.roundPixels = true; + title.x = stageWidth / 2; + title.y = 40; + title.anchor.set(0.5, 0); + app.stage.addChild(title); + + // Listen to pointermove on stage once handle is pressed. + function onDragStart() + { + app.stage.eventMode = 'static'; + app.stage.addEventListener('pointermove', onDrag); + } + + // Stop dragging feedback once the handle is released. + function onDragEnd(e) + { + app.stage.eventMode = 'auto'; + app.stage.removeEventListener('pointermove', onDrag); + } + + // Update the handle's position & bunny's scale when the handle is moved. + function onDrag(e) + { + const halfHandleWidth = handle.width / 2; + // Set handle y-position to match pointer, clamped to (4, screen.height - 4). + + handle.x = Math.max(halfHandleWidth, Math.min(slider.toLocal(e.global).x, sliderWidth - halfHandleWidth)); + // Normalize handle position between -1 and 1. + const t = 2 * (handle.x / sliderWidth - 0.5); + + bunny.scale.set(3 * (1.1 + t)); + } +})(); diff --git a/src/examples/v8.0.0-rc/examplesData.json b/src/examples/v8.0.0/examplesData.json similarity index 92% rename from src/examples/v8.0.0-rc/examplesData.json rename to src/examples/v8.0.0/examplesData.json index 50a3f3d4d..0d83ababf 100644 --- a/src/examples/v8.0.0-rc/examplesData.json +++ b/src/examples/v8.0.0/examplesData.json @@ -3,10 +3,10 @@ "container", "transparentBackground", "tinting", - "cacheAsBitmap", "particleContainer", "blendModes", - "simplePlane" + "meshPlane", + "fillGradient" ], "advanced": [ "slots", @@ -78,7 +78,6 @@ "sharingGeometry", "sharedShader", "mergingGeometry", - "interleavingGeometry", "instancedGeometry", "shaderToyMesh", "multiPassShaderGeneratedMesh" @@ -86,9 +85,7 @@ "textures": [ "textureRotate", "renderTextureBasic", - "renderTextureAdvanced", - "gradientBasic", - "gradientResource" + "renderTextureAdvanced" ], "assets": [ "promise", diff --git a/src/examples/v8.0.0/filtersAdvanced/custom.js b/src/examples/v8.0.0/filtersAdvanced/custom.js new file mode 100644 index 000000000..05d475a6b --- /dev/null +++ b/src/examples/v8.0.0/filtersAdvanced/custom.js @@ -0,0 +1,58 @@ +import { Application, Assets, Sprite, Filter } from 'js'; + +(async () => +{ + // Create a new application + const app = new Application(); + + // Initialize the application + await app.init({ resizeTo: window }); + + // Append the application canvas to the document body + document.body.appendChild(app.canvas); + + // Load the texture + const texture = await Assets.load('https://pixijs.com/assets/bg_grass.jpg'); + + // Create background image + const background = Sprite.from(texture); + + background.width = app.screen.width; + background.height = app.screen.height; + app.stage.addChild(background); + + // Stop application wait for load to finish + app.stop(); + + fetch('https://pixijs.com/assets/pixi-filters/shader.frag') + .then((res) => res.text()) + .then(onLoaded); + + let filter; + + // Handle the load completed + function onLoaded(data) + { + // Create the new filter, arguments: (vertexShader, framentSource) + filter = new Filter(null, data, { + customUniform: 0.0, + }); + + // === WARNING === + // specify uniforms in filter constructor + // or set them BEFORE first use + // filter.uniforms.customUniform = 0.0 + + // Add the filter + background.filters = [filter]; + + // Resume application update + app.start(); + } + + // Animate the filter + app.ticker.add((delta) => + { + filter.uniforms.customUniform += 0.04 * delta; + }); +})(); diff --git a/src/examples/v8.0.0/filtersAdvanced/mouseBlending.js b/src/examples/v8.0.0/filtersAdvanced/mouseBlending.js new file mode 100644 index 000000000..c0d152802 --- /dev/null +++ b/src/examples/v8.0.0/filtersAdvanced/mouseBlending.js @@ -0,0 +1,72 @@ +import { Application, Assets, Container, Sprite, Rectangle, Filter, Point } from 'pixi.js'; + +/** + * https://github.com/pixijs/pixi.js/wiki/v5-Creating-Filters + */ + +(async () => +{ + // Create a new application + const app = new Application(); + + // Initialize the application + await app.init({ resizeTo: window }); + + // Append the application canvas to the document body + document.body.appendChild(app.canvas); + + // Load the grass texture + const texture = await Assets.load('https://pixijs.com/assets/bg_grass.jpg'); + + // Create background image + const background = new Sprite(texture); + + background.width = app.screen.width; + background.height = app.screen.height; + app.stage.addChild(background); + + // NOTE: this shader wont work on old devices where mediump precision is forced in fragment shader + // because v5 default vertex shader uses `inputSize` in it. Same uniform in fragment and vertex shader + // cant have different precision :( + + const shaderFrag = ` + precision highp float; + + varying vec2 vTextureCoord; + + uniform vec2 mouse; + uniform vec4 inputSize; + uniform vec4 outputFrame; + uniform float time; + + void main() { + vec2 screenPos = vTextureCoord * inputSize.xy + outputFrame.xy; + if (length(mouse - screenPos) < 25.0) { + gl_FragColor = vec4(1.0, 1.0, 0.0, 1.0) * 0.7; //yellow circle, alpha=0.7 + } else { + // blend with underlying image, alpha=0.5 + gl_FragColor = vec4( sin(time), (mouse.xy - outputFrame.xy) / outputFrame.zw, 1.0) * 0.5; + } + } + `; + + const container = new Container(); + + container.filterArea = new Rectangle(100, 100, app.screen.width - 200, app.screen.height - 200); + app.stage.addChild(container); + const filter = new Filter({ + resources: { + shader: shaderFrag, + mouse: new Point(), + }, + }); + + container.filters = [filter]; + + app.stage.hitArea = app.screen; + app.stage.eventMode = 'static'; + app.stage.on('pointermove', (event) => + { + filter.uniforms.mouse.copyFrom(event.global); + }); +})(); diff --git a/src/examples/v8.0.0/filtersAdvanced/shaderToyFilterRenderTexture.js b/src/examples/v8.0.0/filtersAdvanced/shaderToyFilterRenderTexture.js new file mode 100644 index 000000000..4763c3f83 --- /dev/null +++ b/src/examples/v8.0.0/filtersAdvanced/shaderToyFilterRenderTexture.js @@ -0,0 +1,125 @@ +import { Application, Assets, Text, Filter, WRAP_MODES } from 'js'; + +/** + * Please note that this is not the most optimal way of doing pure shader generated rendering and should be used when the + * scene is wanted as input texture. Check the mesh version of example for more performant version if you need only shader + * generated content. + **/ + +(async () => +{ + // Create a new application + const app = new Application(); + + // Initialize the application + await app.init({ background: '#1099bb', resizeTo: window }); + + // Append the application canvas to the document body + document.body.appendChild(app.canvas); + + Assets.load('https://pixijs.com/assets/perlin.jpg').then(onAssetsLoaded); + + let filter = null; + + const text = new Text('PixiJS', { fill: 0xffffff, fontSize: 80 }); + + text.anchor.set(0.5, 0.5); + text.position.set(app.renderer.screen.width / 2, app.renderer.screen.height / 2); + + app.stage.addChild(text); + + let totalTime = 0; + + // Fragment shader, in real use this would be much cleaner when loaded from a file + // or embedded into the application as data resource. + const fragment = `//Based on this: https://www.shadertoy.com/view/wtlSWX + + varying vec2 vTextureCoord; + uniform sampler2D uSampler; + uniform sampler2D noise; + uniform float time; + // Distance function. Just calculates the height (z) from x,y plane with really simple length check. + // Its not exact as there could be shorter distances. + vec2 dist(vec3 p) + { + float id = floor(p.x)+floor(p.y); + id = mod(id, 2.); + float h = texture2D(noise, vec2(p.x, p.y)*0.04).r*5.1; + float h2 = texture2D(uSampler, vTextureCoord).r; + return vec2(h+h2-p.z,id); + } + //Light calculation. + vec3 calclight(vec3 p, vec3 rd) + { + vec2 eps = vec2( 0., 0.001); + vec3 n = normalize( vec3( + dist(p+eps.yxx).x - dist(p-eps.yxx).x, + dist(p+eps.xyx).x - dist(p-eps.xyx).x, + dist(p+eps.xxy).x - dist(p-eps.xxy).x + )); + + vec3 d = vec3( max( 0., dot( -rd ,n))); + + return d; + } + + void main() + { + vec2 uv = vec2(vTextureCoord.x, 1.-vTextureCoord.y); + uv *=2.; + uv-=1.; + + vec3 cam = vec3(0.,time -2., -3.); + vec3 target = vec3(sin(time)*0.1, time+cos(time)+2., 0. ); + float fov = 2.2; + vec3 forward = normalize( target - cam); + vec3 up = normalize(cross( forward, vec3(0., 1.,0.))); + vec3 right = normalize( cross( up, forward)); + vec3 raydir = normalize(vec3( uv.x *up + uv.y * right + fov*forward)); + + //Do the raymarch + vec3 col = vec3(0.); + float t = 0.; + for( int i = 0; i < 100; i++) + { + vec3 p = t * raydir + cam; + vec2 d = dist(p); + t+=d.x*0.5;//Jump only half of the distance as height function used is not really the best for heightmaps. + if(d.x < 0.001) + { + vec3 bc = d.y < 0.5 ? vec3(1.0, .8, 0.) : + vec3(0.8,0.0, 1.0); + col = vec3( 1.) * calclight(p, raydir) * (1. - t/150.) *bc; + break; + } + if(t > 1000.) + { + break; + } + } + gl_FragColor = vec4(col, 1.); + } + `; + + function onAssetsLoaded(perlin) + { + // Add perlin noise for filter, make sure it's wrapping and does not have mipmap. + perlin.baseTexture.wrapMode = WRAP_MODES.REPEAT; + perlin.baseTexture.mipmap = false; + + // Build the filter + filter = new Filter(null, fragment, { + time: 0.0, + noise: perlin, + }); + app.stage.filterArea = app.renderer.screen; + app.stage.filters = [filter]; + + // Listen for animate update. + app.ticker.add((delta) => + { + filter.uniforms.time = totalTime; + totalTime += delta / 60; + }); + } +})(); diff --git a/src/examples/v8.0.0/filtersBasic/blur.js b/src/examples/v8.0.0/filtersBasic/blur.js new file mode 100644 index 000000000..6f74101ed --- /dev/null +++ b/src/examples/v8.0.0/filtersBasic/blur.js @@ -0,0 +1,60 @@ +import { Application, Assets, Sprite, BlurFilter } from 'pixi.js'; + +(async () => +{ + // Create a new application + const app = new Application(); + + // Initialize the application + await app.init({ resizeTo: window }); + + // Append the application canvas to the document body + document.body.appendChild(app.canvas); + + // Load the textures + await Assets.load([ + 'https://pixijs.com/assets/pixi-filters/bg_depth_blur.jpg', + 'https://pixijs.com/assets/pixi-filters/depth_blur_dudes.jpg', + 'https://pixijs.com/assets/pixi-filters/depth_blur_moby.jpg', + ]); + + const bg = Sprite.from('https://pixijs.com/assets/pixi-filters/bg_depth_blur.jpg'); + + bg.width = app.screen.width; + bg.height = app.screen.height; + app.stage.addChild(bg); + + const littleDudes = Sprite.from('https://pixijs.com/assets/pixi-filters/depth_blur_dudes.jpg'); + + littleDudes.x = app.screen.width / 2 - 315; + littleDudes.y = 200; + app.stage.addChild(littleDudes); + + const littleRobot = Sprite.from('https://pixijs.com/assets/pixi-filters/depth_blur_moby.jpg'); + + littleRobot.x = app.screen.width / 2 - 200; + littleRobot.y = 100; + app.stage.addChild(littleRobot); + + // Create the blur filters + const blurFilter1 = new BlurFilter(); + const blurFilter2 = new BlurFilter(); + + // Apply the filters to the sprites + littleDudes.filters = [blurFilter1]; + littleRobot.filters = [blurFilter2]; + + let count = 0; + + // Animate the blur filters + app.ticker.add(() => + { + count += 0.005; + + const blurAmount = Math.cos(count); + const blurAmount2 = Math.sin(count); + + blurFilter1.blur = 20 * blurAmount; + blurFilter2.blur = 20 * blurAmount2; + }); +})(); diff --git a/src/examples/v8.0.0/filtersBasic/colorMatrix.js b/src/examples/v8.0.0/filtersBasic/colorMatrix.js new file mode 100644 index 000000000..5df344e0d --- /dev/null +++ b/src/examples/v8.0.0/filtersBasic/colorMatrix.js @@ -0,0 +1,113 @@ +import { Application, Assets, Container, Sprite, Text, ColorMatrixFilter } from 'pixi.js'; + +(async () => +{ + // Create a new application + const app = new Application(); + + // Initialize the application + await app.init({ resizeTo: window }); + + // Append the application canvas to the document body + document.body.appendChild(app.canvas); + + // Load the textures + await Assets.load([ + 'https://pixijs.com/assets/bg_rotate.jpg', + 'https://pixijs.com/assets/bg_scene_rotate.jpg', + 'https://pixijs.com/assets/light_rotate_2.png', + 'https://pixijs.com/assets/light_rotate_1.png', + 'https://pixijs.com/assets/panda.png', + ]); + + app.stage.eventMode = 'static'; + + const bg = Sprite.from('https://pixijs.com/assets/bg_rotate.jpg'); + + bg.anchor.set(0.5); + + bg.x = app.screen.width / 2; + bg.y = app.screen.height / 2; + + const container = new Container(); + + container.x = app.screen.width / 2; + container.y = app.screen.height / 2; + + const bgFront = Sprite.from('https://pixijs.com/assets/bg_scene_rotate.jpg'); + + bgFront.anchor.set(0.5); + + container.addChild(bgFront); + + const light2 = Sprite.from('https://pixijs.com/assets/light_rotate_2.png'); + + light2.anchor.set(0.5); + container.addChild(light2); + + const light1 = Sprite.from('https://pixijs.com/assets/light_rotate_1.png'); + + light1.anchor.set(0.5); + container.addChild(light1); + + const panda = Sprite.from('https://pixijs.com/assets/panda.png'); + + panda.anchor.set(0.5); + + container.addChild(panda); + + app.stage.addChild(container); + + // Create a color matrix filter + const filter = new ColorMatrixFilter(); + + // Apply the Filter + container.filters = [filter]; + + let count = 0; + let enabled = true; + + app.stage.on('pointertap', () => + { + enabled = !enabled; + container.filters = enabled ? [filter] : null; + }); + + const help = new Text({ + text: 'Click or tap to turn filters on / off.', + style: { + fontFamily: 'Arial', + fontSize: 12, + fontWeight: 'bold', + fill: 'white', + }, + }); + + help.y = app.screen.height - 25; + help.x = 10; + + app.stage.addChild(help); + + app.ticker.add(() => + { + bg.rotation += 0.01; + bgFront.rotation -= 0.01; + light1.rotation += 0.02; + light2.rotation += 0.01; + + panda.scale.x = 1 + Math.sin(count) * 0.04; + panda.scale.y = 1 + Math.cos(count) * 0.04; + + count += 0.1; + + // Animate the filter + const { matrix } = filter; + + matrix[1] = Math.sin(count) * 3; + matrix[2] = Math.cos(count); + matrix[3] = Math.cos(count) * 1.5; + matrix[4] = Math.sin(count / 3) * 2; + matrix[5] = Math.sin(count / 2); + matrix[6] = Math.sin(count / 4); + }); +})(); diff --git a/src/examples/v8.0.0/filtersBasic/displacementMapCrawlies.js b/src/examples/v8.0.0/filtersBasic/displacementMapCrawlies.js new file mode 100644 index 000000000..4592fe800 --- /dev/null +++ b/src/examples/v8.0.0/filtersBasic/displacementMapCrawlies.js @@ -0,0 +1,129 @@ +import { Application, Assets, Container, Rectangle, Sprite, Point, DisplacementFilter } from 'pixi.js'; + +(async () => +{ + // Create a new application + const app = new Application(); + + // Initialize the application + await app.init({ resizeTo: window }); + + // Append the application canvas to the document body + document.body.appendChild(app.canvas); + + // Load the textures + await Assets.load([ + 'https://pixijs.com/assets/maggot.png', + 'https://pixijs.com/assets/pixi-filters/displace.png', + 'https://pixijs.com/assets/pixi-filters/ring.png', + 'https://pixijs.com/assets/bg_grass.jpg', + ]); + + app.stage.eventMode = 'static'; + + const container = new Container(); + + app.stage.addChild(container); + + const padding = 100; + const bounds = new Rectangle(-padding, -padding, app.screen.width + padding * 2, app.screen.height + padding * 2); + const maggots = []; + + for (let i = 0; i < 20; i++) + { + const maggot = Sprite.from('https://pixijs.com/assets/maggot.png'); + + maggot.anchor.set(0.5); + container.addChild(maggot); + + maggot.direction = Math.random() * Math.PI * 2; + maggot.speed = 1; + maggot.turnSpeed = Math.random() - 0.8; + + maggot.x = Math.random() * bounds.width; + maggot.y = Math.random() * bounds.height; + + maggot.scale.set(1 + Math.random() * 0.3); + maggot.original = new Point(); + maggot.original.copyFrom(maggot.scale); + maggots.push(maggot); + } + + const displacementSprite = Sprite.from('https://pixijs.com/assets/pixi-filters/displace.png'); + + // Create a displacement filter + const displacementFilter = new DisplacementFilter({ sprite: displacementSprite, scale: 150 }); + + app.stage.addChild(displacementSprite); + + // Apply the filter + container.filters = [displacementFilter]; + + displacementSprite.anchor.set(0.5); + + const ring = Sprite.from('https://pixijs.com/assets/pixi-filters/ring.png'); + + ring.anchor.set(0.5); + + ring.visible = false; + + app.stage.addChild(ring); + + const bg = Sprite.from('https://pixijs.com/assets/bg_grass.jpg'); + + bg.width = app.screen.width; + bg.height = app.screen.height; + + bg.alpha = 0.4; + + container.addChild(bg); + + app.stage.on('mousemove', onPointerMove).on('touchmove', onPointerMove); + + function onPointerMove(eventData) + { + ring.visible = true; + + displacementSprite.position.set(eventData.data.global.x - 25, eventData.data.global.y); + ring.position.copyFrom(displacementSprite.position); + } + + let count = 0; + + // Animate the maggots + app.ticker.add(() => + { + count += 0.05; + + for (let i = 0; i < maggots.length; i++) + { + const maggot = maggots[i]; + + maggot.direction += maggot.turnSpeed * 0.01; + maggot.x += Math.sin(maggot.direction) * maggot.speed; + maggot.y += Math.cos(maggot.direction) * maggot.speed; + + maggot.rotation = -maggot.direction - Math.PI / 2; + maggot.scale.x = maggot.original.x + Math.sin(count) * 0.2; + + // wrap the maggots around as the crawl + if (maggot.x < bounds.x) + { + maggot.x += bounds.width; + } + else if (maggot.x > bounds.x + bounds.width) + { + maggot.x -= bounds.width; + } + + if (maggot.y < bounds.y) + { + maggot.y += bounds.height; + } + else if (maggot.y > bounds.y + bounds.height) + { + maggot.y -= bounds.height; + } + } + }); +})(); diff --git a/src/examples/v8.0.0/filtersBasic/displacementMapFlag.js b/src/examples/v8.0.0/filtersBasic/displacementMapFlag.js new file mode 100644 index 000000000..13a910c7b --- /dev/null +++ b/src/examples/v8.0.0/filtersBasic/displacementMapFlag.js @@ -0,0 +1,60 @@ +import { Application, Assets, Container, Sprite, WRAP_MODES, DisplacementFilter } from 'pixi.js'; + +(async () => +{ + // Create a new application + const app = new Application(); + + // Initialize the application + await app.init({ resizeTo: window }); + + // Append the application canvas to the document body + document.body.appendChild(app.canvas); + + // Load the textures + await Assets.load([ + 'https://pixijs.com/assets/pixi-filters/flag.png', + 'https://pixijs.com/assets/pixi-filters/displacement_map_repeat.jpg', + ]); + + app.stage.eventMode = 'static'; + + const container = new Container(); + + app.stage.addChild(container); + + const flag = Sprite.from('https://pixijs.com/assets/pixi-filters/flag.png'); + + container.addChild(flag); + flag.x = 100; + flag.y = 100; + + const displacementSprite = Sprite.from('https://pixijs.com/assets/pixi-filters/displacement_map_repeat.jpg'); + + // Make sure the sprite is wrapping. + displacementSprite.texture.baseTexture.wrapMode = WRAP_MODES.REPEAT; + + // Create a displacement filter + const displacementFilter = new DisplacementFilter({ sprite: displacementSprite, scale: { x: 60, y: 120 } }); + + displacementFilter.padding = 10; + + displacementSprite.position = flag.position; + + app.stage.addChild(displacementSprite); + + // Apply the filter + flag.filters = [displacementFilter]; + + app.ticker.add(() => + { + // Offset the sprite position to make vFilterCoord update to larger value. + // Repeat wrapping makes sure there's still pixels on the coordinates. + displacementSprite.x++; + // Reset x to 0 when it's over width to keep values from going to very huge numbers. + if (displacementSprite.x > displacementSprite.width) + { + displacementSprite.x = 0; + } + }); +})(); diff --git a/src/examples/v8.0.0/graphics/advanced.js b/src/examples/v8.0.0/graphics/advanced.js new file mode 100644 index 000000000..b2a0b87c7 --- /dev/null +++ b/src/examples/v8.0.0/graphics/advanced.js @@ -0,0 +1,113 @@ +import { Application, Assets, Graphics, Sprite } from 'pixi.js'; + +(async () => +{ + // Create a new application + const app = new Application(); + + // Initialize the application + await app.init({ antialias: true, resizeTo: window }); + + // Append the application canvas to the document body + document.body.appendChild(app.canvas); + + // Load texture + const texture = await Assets.load('https://pixijs.com/assets/bg_rotate.jpg'); + + const sprite = new Sprite(texture); + + // // BEZIER CURVE //// + // information: https://en.wikipedia.org/wiki/Bézier_curve + + const realPath = new Graphics(); + + realPath.moveTo(0, 0); + realPath.lineTo(100, 200); + realPath.lineTo(200, 200); + realPath.lineTo(240, 100); + realPath.stroke({ width: 2, color: 0xffffff }); + + realPath.position.x = 50; + realPath.position.y = 50; + + app.stage.addChild(realPath); + + const bezier = new Graphics(); + + bezier.bezierCurveTo(100, 200, 200, 200, 240, 100); + bezier.stroke({ width: 5, color: 0xaa0000 }); + + bezier.position.x = 50; + bezier.position.y = 50; + + app.stage.addChild(bezier); + + // // BEZIER CURVE 2 //// + const realPath2 = new Graphics(); + + realPath2.moveTo(0, 0); + realPath2.lineTo(0, -100); + realPath2.lineTo(150, 150); + realPath2.lineTo(240, 100); + realPath2.stroke({ width: 2, color: 0xffffff }); + + realPath2.position.x = 320; + realPath2.position.y = 150; + + app.stage.addChild(realPath2); + + const bezier2 = new Graphics(); + + bezier2.bezierCurveTo(0, -100, 150, 150, 240, 100); + bezier2.stroke({ width: 10, texture: sprite.texture }); + + bezier2.position.x = 320; + bezier2.position.y = 150; + + app.stage.addChild(bezier2); + + // // ARC //// + const arc = new Graphics(); + + arc.arc(600, 100, 50, Math.PI, 2 * Math.PI); + arc.stroke({ width: 5, color: 0xaa00bb }); + + app.stage.addChild(arc); + + // // ARC 2 //// + const arc2 = new Graphics(); + + arc2.arc(650, 270, 60, 2 * Math.PI, (3 * Math.PI) / 2); + arc2.stroke({ width: 6, color: 0x3333dd }); + + app.stage.addChild(arc2); + + // // ARC 3 //// + const arc3 = new Graphics(); + + arc3.arc(650, 420, 60, 2 * Math.PI, (2.5 * Math.PI) / 2); + arc3.stroke({ width: 20, texture: sprite.texture }); + + app.stage.addChild(arc3); + + // / Hole //// + const rectAndHole = new Graphics(); + + rectAndHole.rect(350, 350, 150, 150); + rectAndHole.fill(0x00ff00); + rectAndHole.circle(375, 375, 25); + rectAndHole.circle(425, 425, 25); + rectAndHole.circle(475, 475, 25); + rectAndHole.cut(); + + app.stage.addChild(rectAndHole); + + // // Line Texture Style //// + const beatifulRect = new Graphics(); + + beatifulRect.rect(80, 350, 150, 150); + beatifulRect.fill(0xff0000); + beatifulRect.stroke({ width: 20, texture: sprite.texture }); + + app.stage.addChild(beatifulRect); +})(); diff --git a/src/examples/v8.0.0/graphics/dynamic.js b/src/examples/v8.0.0/graphics/dynamic.js new file mode 100644 index 000000000..02a0e87b6 --- /dev/null +++ b/src/examples/v8.0.0/graphics/dynamic.js @@ -0,0 +1,99 @@ +import { Application, Graphics } from 'pixi.js'; + +(async () => +{ + // Create a new application + const app = new Application(); + + // Initialize the application + await app.init({ antialias: true, resizeTo: window }); + + // Append the application canvas to the document body + document.body.appendChild(app.canvas); + + app.stage.eventMode = 'static'; + app.stage.hitArea = app.screen; + + const graphics = new Graphics(); + + // Draw a shape + graphics + .moveTo(50, 50) + .lineTo(250, 50) + .lineTo(100, 100) + .lineTo(250, 220) + .lineTo(50, 220) + .lineTo(50, 50) + .fill({ color: 0xff3300 }) + .stroke({ width: 10, color: 0xffd900 }); + + // Draw a second shape + graphics + .moveTo(210, 300) + .lineTo(450, 320) + .lineTo(570, 350) + .quadraticCurveTo(600, 0, 480, 100) + .lineTo(330, 120) + .lineTo(410, 200) + .lineTo(210, 300) + .fill({ color: 0xff700b }) + .stroke({ width: 10, color: 0xff0000, alpha: 0.8 }); + + // Draw a rectangle + graphics.rect(50, 250, 100, 100); + graphics.stroke({ width: 2, color: 0x0000ff }); + + // Draw a circle + graphics.circle(470, 200, 100); + graphics.fill({ color: 0xffff0b, alpha: 0.5 }); + + graphics.moveTo(30, 30); + graphics.lineTo(600, 300); + graphics.stroke({ width: 20, color: 0x33ff00 }); + + app.stage.addChild(graphics); + + // Let's create a moving shape + const thing = new Graphics(); + + app.stage.addChild(thing); + thing.x = 800 / 2; + thing.y = 600 / 2; + + let count = 0; + + // Just click on the stage to draw random lines + window.app = app; + app.stage.on('pointerdown', () => + { + graphics.moveTo(Math.random() * 800, Math.random() * 600); + graphics.bezierCurveTo( + Math.random() * 800, + Math.random() * 600, + Math.random() * 800, + Math.random() * 600, + Math.random() * 800, + Math.random() * 600, + ); + graphics.stroke({ width: Math.random() * 30, color: Math.random() * 0xffffff }); + }); + + // Animate the moving shape + app.ticker.add(() => + { + count += 0.1; + + thing.clear(); + + thing + .moveTo(-120 + Math.sin(count) * 20, -100 + Math.cos(count) * 20) + .lineTo(120 + Math.cos(count) * 20, -100 + Math.sin(count) * 20) + .lineTo(120 + Math.sin(count) * 20, 100 + Math.cos(count) * 20) + .lineTo(-120 + Math.cos(count) * 20, 100 + Math.sin(count) * 20) + .lineTo(-120 + Math.sin(count) * 20, -100 + Math.cos(count) * 20) + .fill({ color: 0xffff00, alpha: 0.5 }) + .stroke({ width: 10, color: 0xff0000 }); + + thing.rotation = count * 0.1; + }); +})(); diff --git a/src/examples/v8.0.0/graphics/simple.js b/src/examples/v8.0.0/graphics/simple.js new file mode 100644 index 000000000..aab81dd83 --- /dev/null +++ b/src/examples/v8.0.0/graphics/simple.js @@ -0,0 +1,89 @@ +import { Application, Graphics } from 'pixi.js'; + +(async () => +{ + // Create a new application + const app = new Application(); + + // Initialize the application + await app.init({ antialias: true, resizeTo: window }); + + // Append the application canvas to the document body + document.body.appendChild(app.canvas); + + const graphics = new Graphics(); + + // Rectangle + graphics.rect(50, 50, 100, 100); + graphics.fill(0xde3249); + + // Rectangle + line style 1 + graphics.rect(200, 50, 100, 100); + graphics.fill(0x650a5a); + graphics.stroke({ width: 2, color: 0xfeeb77 }); + + // Rectangle + line style 2 + graphics.rect(350, 50, 100, 100); + graphics.fill(0xc34288); + graphics.stroke({ width: 10, color: 0xffbd01 }); + + // Rectangle 2 + graphics.rect(530, 50, 140, 100); + graphics.fill(0xaa4f08); + graphics.stroke({ width: 2, color: 0xffffff }); + + // Circle + graphics.circle(100, 250, 50); + graphics.fill(0xde3249, 1); + + // Circle + line style 1 + graphics.circle(250, 250, 50); + graphics.fill(0x650a5a, 1); + graphics.stroke({ width: 2, color: 0xfeeb77 }); + + // Circle + line style 2 + graphics.circle(400, 250, 50); + graphics.fill(0xc34288, 1); + graphics.stroke({ width: 10, color: 0xffbd01 }); + + // Ellipse + line style 2 + graphics.ellipse(600, 250, 80, 50); + graphics.fill(0xaa4f08, 1); + graphics.stroke({ width: 2, color: 0xffffff }); + + // Draw a shape + graphics.moveTo(50, 350); + graphics.lineTo(250, 350); + graphics.lineTo(100, 400); + graphics.lineTo(50, 350); + graphics.fill(0xff3300); + graphics.stroke({ width: 4, color: 0xffd900 }); + + // Draw a rounded rectangle + graphics.roundRect(50, 440, 100, 100, 16); + graphics.fill(0x650a5a, 0.25); + graphics.stroke({ width: 2, color: 0xff00ff }); + + // Draw star + graphics.star(360, 370, 5, 50); + graphics.fill(0x35cc5a); + graphics.stroke({ width: 2, color: 0xffffff }); + + // Draw star 2 + graphics.star(280, 510, 7, 50); + graphics.fill(0xffcc5a); + graphics.stroke({ width: 2, color: 0xfffffd }); + + // Draw star 3 + graphics.star(470, 450, 4, 50); + graphics.fill(0x55335a); + graphics.stroke(4, 0xffffff); + + // Draw polygon + const path = [600, 370, 700, 460, 780, 420, 730, 570, 590, 520]; + + graphics.poly(path); + graphics.fill(0x3500fa); + + app.stage.addChild(graphics); +})(); diff --git a/src/examples/v8.0.0-rc/index.ts b/src/examples/v8.0.0/index.ts similarity index 94% rename from src/examples/v8.0.0-rc/index.ts rename to src/examples/v8.0.0/index.ts index e950e4884..9ccb7eb3c 100644 --- a/src/examples/v8.0.0-rc/index.ts +++ b/src/examples/v8.0.0/index.ts @@ -13,12 +13,12 @@ import multiple from '!!raw-loader!./assets/multiple.js'; import promise from '!!raw-loader!./assets/promise.js'; import blendModes from '!!raw-loader!./basic/blendModes.js'; -import cacheAsBitmap from '!!raw-loader!./basic/cacheAsBitmap.js'; import container from '!!raw-loader!./basic/container.js'; import particleContainer from '!!raw-loader!./basic/particleContainer.js'; -import simplePlane from '!!raw-loader!./basic/simplePlane.js'; +import meshPlane from '!!raw-loader!./basic/meshPlane.js'; import tinting from '!!raw-loader!./basic/tinting.js'; import transparentBackground from '!!raw-loader!./basic/transparentBackground.js'; +import fillGradient from '!!raw-loader!./basic/fillGradient.js'; import click from '!!raw-loader!./events/click.js'; import customHitarea from '!!raw-loader!./events/customHitarea.js'; @@ -49,7 +49,6 @@ import graphics from '!!raw-loader!./masks/graphics.js'; import sprite from '!!raw-loader!./masks/sprite.js'; import instancedGeometry from '!!raw-loader!./meshAndShaders/instancedGeometry.js'; -import interleavingGeometry from '!!raw-loader!./meshAndShaders/interleavingGeometry.js'; import mergingGeometry from '!!raw-loader!./meshAndShaders/mergingGeometry.js'; import multiPassShaderGeneratedMesh from '!!raw-loader!./meshAndShaders/multiPassShaderGeneratedMesh.js'; import shaderToyMesh from '!!raw-loader!./meshAndShaders/shaderToyMesh.js'; @@ -78,8 +77,6 @@ import fromFont from '!!raw-loader!./text/fromFont.js'; import pixiText from '!!raw-loader!./text/pixiText.js'; import webFont from '!!raw-loader!./text/webFont.js'; -import gradientBasic from '!!raw-loader!./textures/gradientBasic.js'; -import gradientResource from '!!raw-loader!./textures/gradientResource.js'; import renderTextureAdvanced from '!!raw-loader!./textures/renderTextureAdvanced.js'; import renderTextureBasic from '!!raw-loader!./textures/renderTextureBasic.js'; import textureRotate from '!!raw-loader!./textures/textureRotate.js'; @@ -94,12 +91,12 @@ import type { CategoryDataType, ExampleDataEntry, ExamplesDataType, ExamplesJson const examplesSource: ExamplesSourceType = { basic: { blendModes, - cacheAsBitmap, container, particleContainer, - simplePlane, + meshPlane, tinting, transparentBackground, + fillGradient, }, sprite: { animatedSpriteAnimationSpeed, @@ -139,8 +136,6 @@ const examplesSource: ExamplesSourceType = { sprite, }, textures: { - gradientBasic, - gradientResource, renderTextureAdvanced, renderTextureBasic, textureRotate, @@ -178,7 +173,6 @@ const examplesSource: ExamplesSourceType = { }, meshAndShaders: { instancedGeometry, - interleavingGeometry, mergingGeometry, multiPassShaderGeneratedMesh, shaderToyMesh, diff --git a/src/examples/v8.0.0/masks/filter.js b/src/examples/v8.0.0/masks/filter.js new file mode 100644 index 000000000..ad68a24ea --- /dev/null +++ b/src/examples/v8.0.0/masks/filter.js @@ -0,0 +1,54 @@ +import { Application, Assets, Sprite, Graphics, SCALE_MODES, Rectangle, BlurFilter } from 'pixi.js'; + +(async () => +{ + // Create a new application + const app = new Application(); + + // Initialize the application + await app.init({ resizeTo: window }); + + // Append the application canvas to the document body + document.body.appendChild(app.canvas); + + // Inner radius of the circle + const radius = 100; + + // The blur amount + const blurSize = 32; + + // Load the grass texture + const grassTexture = await Assets.load('https://pixijs.com/assets/bg_grass.jpg'); + + // Create the grass background + const background = new Sprite(grassTexture); + + app.stage.addChild(background); + background.width = app.screen.width; + background.height = app.screen.height; + + const circle = new Graphics().circle(radius + blurSize, radius + blurSize, radius).fill({ color: 0xff0000 }); + + circle.filters = [new BlurFilter(blurSize)]; + + const bounds = new Rectangle(0, 0, (radius + blurSize) * 2, (radius + blurSize) * 2); + const texture = app.renderer.generateTexture({ + target: circle, + style: { scaleMode: SCALE_MODES.NEAREST }, + resolution: 1, + frame: bounds, + }); + const focus = new Sprite(texture); + + app.stage.addChild(focus); + + background.mask = focus; + + app.stage.eventMode = 'static'; + app.stage.hitArea = app.screen; + app.stage.on('pointermove', (event) => + { + focus.position.x = event.global.x - focus.width / 2; + focus.position.y = event.global.y - focus.height / 2; + }); +})(); diff --git a/src/examples/v8.0.0/masks/graphics.js b/src/examples/v8.0.0/masks/graphics.js new file mode 100644 index 000000000..40b898d3c --- /dev/null +++ b/src/examples/v8.0.0/masks/graphics.js @@ -0,0 +1,119 @@ +import { Application, Assets, Container, Sprite, Graphics, Text } from 'pixi.js'; + +(async () => +{ + // Create a new application + const app = new Application(); + + // Initialize the application + await app.init({ antialias: true, resizeTo: window }); + + // Append the application canvas to the document body + document.body.appendChild(app.canvas); + + app.stage.eventMode = 'static'; + + // Load textures + await Assets.load([ + 'https://pixijs.com/assets/bg_rotate.jpg', + 'https://pixijs.com/assets/bg_scene_rotate.jpg', + 'https://pixijs.com/assets/light_rotate_2.png', + 'https://pixijs.com/assets/light_rotate_1.png', + 'https://pixijs.com/assets/panda.png', + ]); + + const bg = Sprite.from('https://pixijs.com/assets/bg_rotate.jpg'); + + bg.anchor.set(0.5); + + bg.x = app.screen.width / 2; + bg.y = app.screen.height / 2; + + app.stage.addChild(bg); + + const container = new Container(); + + container.x = app.screen.width / 2; + container.y = app.screen.height / 2; + + // Add a bunch of sprites + const bgFront = Sprite.from('https://pixijs.com/assets/bg_scene_rotate.jpg'); + + bgFront.anchor.set(0.5); + + const light2 = Sprite.from('https://pixijs.com/assets/light_rotate_2.png'); + + light2.anchor.set(0.5); + + const light1 = Sprite.from('https://pixijs.com/assets/light_rotate_1.png'); + + light1.anchor.set(0.5); + + const panda = Sprite.from('https://pixijs.com/assets/panda.png'); + + panda.anchor.set(0.5); + + container.addChild(bgFront, light2, light1, panda); + + app.stage.addChild(container); + + // Let's create a moving shape mask + const thing = new Graphics(); + + app.stage.addChild(thing); + thing.x = app.screen.width / 2; + thing.y = app.screen.height / 2; + + container.mask = thing; + + let count = 0; + + app.stage.on('pointertap', () => + { + if (!container.mask) + { + container.mask = thing; + } + else + { + container.mask = null; + } + }); + + const help = new Text({ + text: 'Click or tap to turn masking on / off.', + style: { + fontFamily: 'Arial', + fontSize: 12, + fontWeight: 'bold', + fill: 'white', + }, + }); + + help.y = app.screen.height - 26; + help.x = 10; + app.stage.addChild(help); + + // Animate the mask + app.ticker.add(() => + { + bg.rotation += 0.01; + bgFront.rotation -= 0.01; + + light1.rotation += 0.02; + light2.rotation += 0.01; + + panda.scale.x = 1 + Math.sin(count) * 0.04; + panda.scale.y = 1 + Math.cos(count) * 0.04; + + count += 0.1; + + thing.clear(); + thing.moveTo(-120 + Math.sin(count) * 20, -100 + Math.cos(count) * 20); + thing.lineTo(120 + Math.cos(count) * 20, -100 + Math.sin(count) * 20); + thing.lineTo(120 + Math.sin(count) * 20, 100 + Math.cos(count) * 20); + thing.lineTo(-120 + Math.cos(count) * 20, 100 + Math.sin(count) * 20); + thing.fill({ color: 0x8bc5ff, alpha: 0.4 }); + thing.rotation = count * 0.1; + }); +})(); diff --git a/src/examples/v8.0.0/masks/sprite.js b/src/examples/v8.0.0/masks/sprite.js new file mode 100644 index 000000000..41d6dd6eb --- /dev/null +++ b/src/examples/v8.0.0/masks/sprite.js @@ -0,0 +1,62 @@ +import { Application, Assets, Sprite, Point } from 'pixi.js'; + +(async () => +{ + // Create a new application + const app = new Application(); + + // Initialize the application + await app.init({ resizeTo: window }); + + // Append the application canvas to the document body + document.body.appendChild(app.canvas); + + // Load textures + await Assets.load([ + 'https://pixijs.com/assets/bg_plane.jpg', + 'https://pixijs.com/assets/cells.png', + 'https://pixijs.com/assets/flowerTop.png', + ]); + + app.stage.eventMode = 'static'; + + const bg = Sprite.from('https://pixijs.com/assets/bg_plane.jpg'); + + app.stage.addChild(bg); + + const cells = Sprite.from('https://pixijs.com/assets/cells.png'); + + cells.scale.set(1.5); + + const mask = Sprite.from('https://pixijs.com/assets/flowerTop.png'); + + mask.anchor.set(0.5); + mask.x = 310; + mask.y = 190; + + cells.mask = mask; + + app.stage.addChild(mask, cells); + + const target = new Point(); + + reset(); + + function reset() + { + target.x = Math.floor(Math.random() * 550); + target.y = Math.floor(Math.random() * 300); + } + + // Animate the mask + app.ticker.add(() => + { + mask.x += (target.x - mask.x) * 0.1; + mask.y += (target.y - mask.y) * 0.1; + + if (Math.abs(mask.x - target.x) < 1) + { + reset(); + } + }); +})(); diff --git a/src/examples/v8.0.0/meshAndShaders/instancedGeometry.js b/src/examples/v8.0.0/meshAndShaders/instancedGeometry.js new file mode 100644 index 000000000..2f6fcb785 --- /dev/null +++ b/src/examples/v8.0.0/meshAndShaders/instancedGeometry.js @@ -0,0 +1,84 @@ +import { Application, Assets, Mesh, Geometry, Buffer, TYPES, Shader } from 'js'; + +(async () => +{ + // Create a new application + const app = new Application(); + + // Initialize the application + await app.init({ resizeTo: window }); + + // Append the application canvas to the document body + document.body.appendChild(app.canvas); + + const geometry = new Geometry().addAttribute('aVPos', [-100, 0, 100, 0, 0, -150]); + + geometry.instanced = true; + geometry.instanceCount = 5; + + const positionSize = 2; + const colorSize = 3; + const buffer = new Buffer(new Float32Array(geometry.instanceCount * (positionSize + colorSize))); + + geometry.addAttribute('aIPos', buffer, positionSize, false, TYPES.FLOAT, 4 * (positionSize + colorSize), 0, true); + geometry.addAttribute( + 'aICol', + buffer, + colorSize, + false, + TYPES.FLOAT, + 4 * (positionSize + colorSize), + 4 * positionSize, + true, + ); + + for (let i = 0; i < geometry.instanceCount; i++) + { + const instanceOffset = i * (positionSize + colorSize); + + buffer.data[instanceOffset + 0] = i * 80; + buffer.data[instanceOffset + 2] = Math.random(); + buffer.data[instanceOffset + 3] = Math.random(); + buffer.data[instanceOffset + 4] = Math.random(); + } + + const shader = Shader.from( + ` + precision mediump float; + attribute vec2 aVPos; + attribute vec2 aIPos; + attribute vec3 aICol; + + uniform mat3 translationMatrix; + uniform mat3 projectionMatrix; + + varying vec3 vCol; + + void main() { + vCol = aICol; + + gl_Position = vec4((projectionMatrix * translationMatrix * vec3(aVPos + aIPos, 1.0)).xy, 0.0, 1.0); + }`, + + `precision mediump float; + + varying vec3 vCol; + + void main() { + gl_FragColor = vec4(vCol, 1.0); + } + +`, + ); + + const triangles = new Mesh(geometry, shader); + + triangles.position.set(400, 300); + + app.stage.addChild(triangles); + + app.ticker.add(() => + { + triangles.rotation += 0.01; + }); +})(); diff --git a/src/examples/v8.0.0/meshAndShaders/mergingGeometry.js b/src/examples/v8.0.0/meshAndShaders/mergingGeometry.js new file mode 100644 index 000000000..fbfc5e04f --- /dev/null +++ b/src/examples/v8.0.0/meshAndShaders/mergingGeometry.js @@ -0,0 +1,83 @@ +import { Application, Assets, Mesh, Geometry, Shader } from 'js'; + +(async () => +{ + // Create a new application + const app = new Application(); + + // Initialize the application + await app.init({ resizeTo: window }); + + // Append the application canvas to the document body + document.body.appendChild(app.canvas); + + // Load the texture + const texture = await Assets.load('https://pixijs.com/assets/bg_scene_rotate.jpg'); + + const geometry = new Geometry({ + attributes: { + aVertexPosition: [-100, -100, 100, -100, 100, 100, -100, 100], + aUvs: [0, 0, 1, 0, 1, 1, 0, 1], + }, + indexBuffer: [0, 1, 2, 0, 2, 3], + }); + + const geometry2 = new Geometry({ + attributes: { + aVertexPosition: [-100 + 100, -100, 100 + 100, -100, 100 + 100, 100], + aUvs: [0, 0, 1, 0, 1, 1], + }, + indexBuffer: [0, 1, 2], + }); + + const geometry3 = Geometry.merge([geometry, geometry2]); + + const shader = Shader.from( + ` + + precision mediump float; + + attribute vec2 aVertexPosition; + attribute vec2 aUvs; + + uniform mat3 translationMatrix; + uniform mat3 projectionMatrix; + + varying vec2 vUvs; + + void main() { + + vUvs = aUvs; + gl_Position = vec4((projectionMatrix * translationMatrix * vec3(aVertexPosition, 1.0)).xy, 0.0, 1.0); + + }`, + + `precision mediump float; + + varying vec2 vUvs; + + uniform sampler2D uSampler2; + + void main() { + + gl_FragColor = texture2D(uSampler2, vUvs ); + } + +`, + { + uSampler2: texture, + }, + ); + + const quad = new Mesh(geometry3, shader); + + quad.position.set(400, 300); + quad.scale.set(2); + + app.stage.addChild(quad); + + app.ticker.add((delta) => + { + quad.rotation += 0.01; + }); +})(); diff --git a/src/examples/v8.0.0/meshAndShaders/multiPassShaderGeneratedMesh.js b/src/examples/v8.0.0/meshAndShaders/multiPassShaderGeneratedMesh.js new file mode 100644 index 000000000..3dfe67a4c --- /dev/null +++ b/src/examples/v8.0.0/meshAndShaders/multiPassShaderGeneratedMesh.js @@ -0,0 +1,243 @@ +import { Application, Assets, Container, Mesh, Geometry, Texture, Shader, RenderTexture } from 'js'; + +(async () => +{ + // Create a new application + const app = new Application(); + + // Initialize the application + await app.init({ height: 640, resizeTo: window }); + + // Append the application canvas to the document body + document.body.appendChild(app.canvas); + + // Build geometry. + const geometry = new Geometry() + .addAttribute( + 'aVertexPosition', // the attribute name + [ + 0, + 0, // x, y + 200, + 0, // x, y + 200, + 200, + 0, + 200, + ], // x, y + 2, + ) // the size of the attribute + .addAttribute( + 'aUvs', // the attribute name + [ + 0, + 0, // u, v + 1, + 0, // u, v + 1, + 1, + 0, + 1, + ], // u, v + 2, + ) // the size of the attribute + .addIndex([0, 1, 2, 0, 2, 3]); + + // Vertex shader. Use same shader for all passes. + const vertexSrc = ` + +precision mediump float; + +attribute vec2 aVertexPosition; +attribute vec2 aUvs; + +uniform mat3 translationMatrix; +uniform mat3 projectionMatrix; + +varying vec2 vUvs; + +void main() { + + vUvs = aUvs; + gl_Position = vec4((projectionMatrix * translationMatrix * vec3(aVertexPosition, 1.0)).xy, 0.0, 1.0); + +}`; + + // Load a perlinnoise texture for one of the shaders. + const perlinTexture = Texture.from('https://pixijs.com/assets/perlin.jpg'); + + // First pass, generates a grid. + const fragmentGridSrc = ` +precision mediump float; +varying vec2 vUvs; +uniform float zoom; + +void main() +{ +//Generate a simple grid. +//Offset uv so that center is 0,0 and edges are -1,1 +vec2 uv = (vUvs-vec2(0.5))*2.0; +vec2 gUv = floor(uv*zoom); +vec4 color1 = vec4(0.8, 0.8, 0.8, 1.0); +vec4 color2 = vec4(0.4, 0.4, 0.4, 1.0); +vec4 outColor = mod(gUv.x + gUv.y, 2.) < 0.5 ? color1 : color2; +gl_FragColor = outColor; + +}`; + + const gridUniforms = { + zoom: 10, + }; + const gridShader = Shader.from(vertexSrc, fragmentGridSrc, gridUniforms); + // Sharing textures and meshes is possible. + // But for simplicity each pass has its own output texture and mesh in this example. + const gridTexture = RenderTexture.create({ width: 200, height: 200 }); + const gridQuad = new Mesh(geometry, gridShader); + const gridContainer = new Container(); + + gridContainer.addChild(gridQuad); + + // Second pass. Takes grid as input and makes it ripple. + const fragmentRippleSrc = ` +precision mediump float; +varying vec2 vUvs; +uniform float amount; +uniform float phase; +uniform sampler2D texIn; + +void main() +{ +//Generate a simple grid. +vec2 uv = vUvs; +//Calculate distance from center +float distance = length( uv - vec2(0.5)); +vec4 color = texture2D(texIn, uv); +color.rgb *= sin(distance*25.0+phase) * amount+1.; +gl_FragColor = color; +}`; + const rippleUniforms = { + amount: 0.5, + phase: 0, + texIn: gridTexture, + }; + const rippleShader = Shader.from(vertexSrc, fragmentRippleSrc, rippleUniforms); + const rippleTexture = RenderTexture.create({ width: 200, height: 200 }); + const rippleQuad = new Mesh(geometry, rippleShader); + const rippleContainer = new Container(); + + rippleContainer.addChild(rippleQuad); + + // Second effect. Generates a filtered noise. + const fragmentNoiseSrc = ` +precision mediump float; +varying vec2 vUvs; +uniform float limit; +uniform sampler2D noise; + +void main() +{ +float color = texture2D(noise, vUvs).r; +color = step(limit, color); +gl_FragColor = vec4(color); +}`; + const noiseUniforms = { + limit: 0.5, + noise: perlinTexture, + }; + const noiseShader = Shader.from(vertexSrc, fragmentNoiseSrc, noiseUniforms); + const noiseTexture = RenderTexture.create({ width: 200, height: 200 }); + const noiseQuad = new Mesh(geometry, noiseShader); + const noiseContainer = new Container(); + + noiseContainer.addChild(noiseQuad); + + // Third effect + const fragmentWaveSrc = ` +precision mediump float; +varying vec2 vUvs; +uniform float amplitude; +uniform float time; + +void main() +{ +//Offset uv so that center is 0,0 and edges are -1,1 +vec2 uv = (vUvs-vec2(0.5))*2.0; + +vec3 outColor = vec3(0.); + +//Simple wavefunctions inversed and with small offsets. +outColor += 5./length(uv.y*200. - 50.0*sin( uv.x*0.25+ time*0.25)*amplitude); +outColor += 4./length(uv.y*300. - 100.0*sin(uv.x*0.5+time*0.5)*amplitude*1.2); +outColor += 3./length(uv.y*400. - 150.0*sin(uv.x*0.75+time*0.75)*amplitude*1.4); +outColor += 2./length(uv.y*500. - 200.0*sin(uv.x+time)*amplitude*1.6); + +gl_FragColor = vec4(outColor,1.0); +}`; + const waveUniforms = { + amplitude: 0.75, + time: 0, + }; + const waveShader = Shader.from(vertexSrc, fragmentWaveSrc, waveUniforms); + const waveTexture = RenderTexture.create({ width: 200, height: 200 }); + const waveQuad = new Mesh(geometry, waveShader); + const waveContainer = new Container(); + + waveContainer.addChild(waveQuad); + + // Final combination pass + const fragmentCombineSrc = ` +precision mediump float; +varying vec2 vUvs; + +uniform sampler2D texRipple; +uniform sampler2D texNoise; +uniform sampler2D texWave; + +void main() +{ +//Read color from all +vec4 ripple = texture2D(texRipple, vUvs); +vec4 noise = texture2D(texNoise, vUvs); +vec4 wave = texture2D(texWave, vUvs); + +gl_FragColor = mix(ripple, wave,noise.r); +}`; + const combineUniforms = { + texRipple: rippleTexture, + texNoise: noiseTexture, + texWave: waveTexture, + }; + const combineShader = Shader.from(vertexSrc, fragmentCombineSrc, combineUniforms); + const combineQuad = new Mesh(geometry, combineShader); + + gridContainer.position.set(10, 10); + rippleContainer.position.set(220, 10); + noiseContainer.position.set(10, 220); + waveContainer.position.set(10, 430); + combineQuad.position.set(430, 220); + + // Add all phases to stage so all the phases can be seen separately. + app.stage.addChild(gridContainer); + app.stage.addChild(rippleContainer); + app.stage.addChild(noiseContainer); + app.stage.addChild(waveContainer); + app.stage.addChild(combineQuad); + + // start the animation.. + let time = 0; + + app.ticker.add(() => + { + time += 1 / 60; + // gridQuad.shader.uniforms.zoom = Math.sin(time)*5+10; + rippleQuad.shader.uniforms.phase = -time; + waveQuad.shader.uniforms.time = time; + noiseQuad.shader.uniforms.limit = Math.sin(time * 0.5) * 0.35 + 0.5; + + // Render the passes to get textures. + app.renderer.render(gridQuad, { renderTexture: gridTexture }); + app.renderer.render(rippleQuad, { renderTexture: rippleTexture }); + app.renderer.render(noiseQuad, { renderTexture: noiseTexture }); + app.renderer.render(waveQuad, { renderTexture: waveTexture }); + }); +})(); diff --git a/src/examples/v8.0.0/meshAndShaders/shaderToyMesh.js b/src/examples/v8.0.0/meshAndShaders/shaderToyMesh.js new file mode 100644 index 000000000..372c40af7 --- /dev/null +++ b/src/examples/v8.0.0/meshAndShaders/shaderToyMesh.js @@ -0,0 +1,166 @@ +import { Application, Assets, Mesh, Shader, WRAP_MODES, Geometry } from 'js'; + +(async () => +{ + // Create a new application + const app = new Application(); + + // Initialize the application + await app.init({ resizeTo: window }); + + // Append the application canvas to the document body + document.body.appendChild(app.canvas); + + // Load the texture + const texture = await Assets.load('https://pixijs.com/assets/perlin.jpg'); + + // Build geometry. + const geometry = new Geometry() + .addAttribute( + 'aVertexPosition', // the attribute name + [ + -100, + -100, // x, y + 100, + -100, // x, y + 100, + 100, + -100, + 100, + ], // x, y + 2, + ) // the size of the attribute + .addAttribute( + 'aUvs', // the attribute name + [ + 0, + 0, // u, v + 1, + 0, // u, v + 1, + 1, + 0, + 1, + ], // u, v + 2, + ) // the size of the attribute + .addIndex([0, 1, 2, 0, 2, 3]); + + const vertexSrc = ` + +precision mediump float; + +attribute vec2 aVertexPosition; +attribute vec2 aUvs; + +uniform mat3 translationMatrix; +uniform mat3 projectionMatrix; + +varying vec2 vUvs; + +void main() { + + vUvs = aUvs; + gl_Position = vec4((projectionMatrix * translationMatrix * vec3(aVertexPosition, 1.0)).xy, 0.0, 1.0); + +}`; + + const fragmentSrc = ` +//Based on this: https://www.shadertoy.com/view/wtlSWX +precision mediump float; + +varying vec2 vUvs; + +uniform sampler2D noise; +uniform float time; + +// Distance function. Just calculates the height (z) from x,y plane with really simple length check. +// Its not exact as there could be shorter distances. +vec2 dist(vec3 p) +{ +float id = floor(p.x)+floor(p.y); +id = mod(id, 2.); +float h = texture2D(noise, vec2(p.x, p.y)*0.04).r*5.1; +return vec2(h-p.z,id); +} + +//Light calculation. +vec3 calclight(vec3 p, vec3 rd) +{ +vec2 eps = vec2( 0., 0.001); +vec3 n = normalize( vec3( +dist(p+eps.yxx).x - dist(p-eps.yxx).x, +dist(p+eps.xyx).x - dist(p-eps.xyx).x, +dist(p+eps.xxy).x - dist(p-eps.xxy).x +)); + +vec3 d = vec3( max( 0., dot( -rd ,n))); + +return d; +} + +void main() +{ +vec2 uv = vec2(vUvs.x,1.-vUvs.y); +uv *=2.; +uv-=1.; + +vec3 cam = vec3(0.,time -2., -3.); +vec3 target = vec3(sin(time)*0.1, time+cos(time)+2., 0. ); +float fov = 2.2; +vec3 forward = normalize( target - cam); +vec3 up = normalize(cross( forward, vec3(0., 1.,0.))); +vec3 right = normalize( cross( up, forward)); +vec3 raydir = normalize(vec3( uv.x *up + uv.y * right + fov*forward)); + +//Do the raymarch +vec3 col = vec3(0.); +float t = 0.; +for( int i = 0; i < 100; i++) +{ +vec3 p = t * raydir + cam; +vec2 d = dist(p); +t+=d.x*0.5;//Jump only half of the distance as height function used is not really the best for heightmaps. +if(d.x < 0.001) +{ + vec3 bc = d.y < 0.5 ? vec3(1.0, .8, 0.) : + vec3(0.8,0.0, 1.0); + col = vec3( 1.) * calclight(p, raydir) * (1. - t/150.) *bc; + break; +} +if(t > 1000.) +{ + break; +} +} +gl_FragColor = vec4(col, 1.); +}`; + + const uniforms = { + noise: texture, + time: 0, + }; + // Make sure repeat wrap is used and no mipmapping. + + uniforms.noise.baseTexture.wrapMode = WRAP_MODES.REPEAT; + uniforms.noise.baseTexture.mipmap = false; + + // Build the shader and the quad. + const shader = Shader.from(vertexSrc, fragmentSrc, uniforms); + const quad = new Mesh(geometry, shader); + + quad.position.set(400, 300); + quad.scale.set(2); + + app.stage.addChild(quad); + + // start the animation.. + let time = 0; + + app.ticker.add(() => + { + time += 1 / 60; + quad.shader.uniforms.time = time; + quad.scale.set(Number(Math.cos(time)) + 2, Number(Math.sin(time * 0.7)) + 2); + }); +})(); diff --git a/src/examples/v8.0.0/meshAndShaders/sharedShader.js b/src/examples/v8.0.0/meshAndShaders/sharedShader.js new file mode 100644 index 000000000..9da1df82a --- /dev/null +++ b/src/examples/v8.0.0/meshAndShaders/sharedShader.js @@ -0,0 +1,117 @@ +import { Application, Assets, Geometry, Shader, Mesh } from 'js'; + +(async () => +{ + // Create a new application + const app = new Application(); + + // Initialize the application + await app.init({ resizeTo: window }); + + // Append the application canvas to the document body + document.body.appendChild(app.canvas); + + // Load the texture + const texture = await Assets.load('https://pixijs.com/assets/bg_scene_rotate.jpg'); + + const geometry = new Geometry({ + attributes: { + aVertexPosition: [-100, -100, 100, -100, 100, 100], + aUvs: [0, 0, 1, 0, 1, 1], + }, + }); + + const shader = Shader.from( + ` + + precision mediump float; + + attribute vec2 aVertexPosition; + attribute vec2 aUvs; + + uniform mat3 translationMatrix; + uniform mat3 projectionMatrix; + + varying vec2 vUvs; + + void main() { + + vUvs = aUvs; + gl_Position = vec4((projectionMatrix * translationMatrix * vec3(aVertexPosition, 1.0)).xy, 0.0, 1.0); + + }`, + + `precision mediump float; + + varying vec2 vUvs; + + uniform sampler2D uSampler2; + + void main() { + + gl_FragColor = texture2D(uSampler2, vUvs); + } + +`, + { + uSampler2: texture, + }, + ); + + const shader2 = Shader.from( + ` + + precision mediump float; + + attribute vec2 aVertexPosition; + attribute vec2 aUvs; + + uniform mat3 translationMatrix; + uniform mat3 projectionMatrix; + + varying vec2 vUvs; + + void main() { + + vUvs = aUvs; + gl_Position = vec4((projectionMatrix * translationMatrix * vec3(aVertexPosition, 1.0)).xy, 0.0, 1.0); + + }`, + + `precision mediump float; + + varying vec2 vUvs; + + uniform sampler2D uSampler2; + + void main() { + + gl_FragColor = texture2D(uSampler2, vUvs); + gl_FragColor.r += (abs(sin(gl_FragCoord.x * 0.06)) * 0.5) * 2.; + gl_FragColor.g += (abs(cos(gl_FragCoord.y * 0.06)) * 0.5) * 2.; + } + +`, + { + uSampler2: texture, + }, + ); + + const triangle = new Mesh(geometry, shader); + + const triangle2 = new Mesh(geometry, shader2); + + triangle.position.set(400, 300); + triangle.scale.set(2); + + triangle2.position.set(500, 400); + triangle2.scale.set(3); + + app.stage.addChild(triangle2, triangle); + + app.ticker.add((delta) => + { + triangle.rotation += 0.01; + triangle2.rotation -= 0.005; + }); +})(); diff --git a/src/examples/v8.0.0/meshAndShaders/sharingGeometry.js b/src/examples/v8.0.0/meshAndShaders/sharingGeometry.js new file mode 100644 index 000000000..efef94235 --- /dev/null +++ b/src/examples/v8.0.0/meshAndShaders/sharingGeometry.js @@ -0,0 +1,98 @@ +import { Application, Assets, Geometry, Texture, Mesh, Shader, Program } from 'js'; + +(async () => +{ + // Create a new application + const app = new Application(); + + // Initialize the application + await app.init({ resizeTo: window }); + + // Append the application canvas to the document body + document.body.appendChild(app.canvas); + + // Load the textures + await Assets.load([ + 'https://pixijs.com/assets/bg_scene_rotate.jpg', + 'https://pixijs.com/assets/bg_rotate.jpg', + 'https://pixijs.com/assets/bg_displacement.jpg', + ]); + + const geometry = new Geometry({ + attributes: { + aVertexPosition: [-100, -100, 100, -100, 100, 100], + aUvs: [0, 0, 1, 0, 1, 1], + }, + }); + + const program = Program.from( + ` + precision mediump float; + + attribute vec2 aVertexPosition; + attribute vec2 aUvs; + + uniform mat3 translationMatrix; + uniform mat3 projectionMatrix; + + varying vec2 vUvs; + + void main() { + + vUvs = aUvs; + gl_Position = vec4((projectionMatrix * translationMatrix * vec3(aVertexPosition, 1.0)).xy, 0.0, 1.0); + + }`, + + `precision mediump float; + + varying vec2 vUvs; + + uniform sampler2D uSamplerTexture; + + void main() { + + gl_FragColor = texture2D(uSamplerTexture, vUvs); + } + +`, + ); + + const triangle = new Mesh( + geometry, + new Shader(program, { + uSamplerTexture: Texture.from('https://pixijs.com/assets/bg_scene_rotate.jpg'), + }), + ); + + const triangle2 = new Mesh( + geometry, + new Shader(program, { + uSamplerTexture: Texture.from('https://pixijs.com/assets/bg_rotate.jpg'), + }), + ); + + const triangle3 = new Mesh( + geometry, + new Shader(program, { + uSamplerTexture: Texture.from('https://pixijs.com/assets/bg_displacement.jpg'), + }), + ); + + triangle.position.set(400, 300); + triangle.scale.set(2); + + triangle2.position.set(200, 100); + + triangle3.position.set(500, 400); + triangle3.scale.set(3); + + app.stage.addChild(triangle3, triangle2, triangle); + + app.ticker.add((delta) => + { + triangle.rotation += 0.01; + triangle2.rotation -= 0.01; + triangle3.rotation -= 0.005; + }); +})(); diff --git a/src/examples/v8.0.0/meshAndShaders/texturedMeshAdvanced.js b/src/examples/v8.0.0/meshAndShaders/texturedMeshAdvanced.js new file mode 100644 index 000000000..17795d33e --- /dev/null +++ b/src/examples/v8.0.0/meshAndShaders/texturedMeshAdvanced.js @@ -0,0 +1,75 @@ +import { Application, Assets, Point, MeshRope, Graphics } from 'pixi.js'; + +(async () => +{ + // Create a new application + const app = new Application(); + + // Initialize the application + await app.init({ resizeTo: window }); + + // Append the application canvas to the document body + document.body.appendChild(app.canvas); + + // Load the snake texture + const texture = await Assets.load('https://pixijs.com/assets/snake.png'); + + let count = 0; + + // Build a rope from points! + const ropeLength = 45; + + const points = []; + + for (let i = 0; i < 25; i++) + { + points.push(new Point(i * ropeLength, 0)); + } + + // Create the snake MeshRope + const strip = new MeshRope({ texture, points }); + + strip.x = -40; + strip.y = 300; + + app.stage.addChild(strip); + + const g = new Graphics(); + + g.x = strip.x; + g.y = strip.y; + app.stage.addChild(g); + + // Start animating + app.ticker.add(() => + { + count += 0.1; + + // Make the snake + for (let i = 0; i < points.length; i++) + { + points[i].y = Math.sin(i * 0.5 + count) * 30; + points[i].x = i * ropeLength + Math.cos(i * 0.3 + count) * 20; + } + renderPoints(); + }); + + function renderPoints() + { + g.clear(); + g.moveTo(points[0].x, points[0].y); + + for (let i = 1; i < points.length; i++) + { + g.lineTo(points[i].x, points[i].y); + g.stroke({ width: 2, color: 0xffc2c2 }); + } + + for (let i = 1; i < points.length; i++) + { + g.drawCircle(points[i].x, points[i].y, 10); + g.fill({ color: 0xff0022 }); + g.stroke({ width: 2, color: 0xffc2c2 }); + } + } +})(); diff --git a/src/examples/v8.0.0/meshAndShaders/texturedMeshBasic.js b/src/examples/v8.0.0/meshAndShaders/texturedMeshBasic.js new file mode 100644 index 000000000..5ca550c06 --- /dev/null +++ b/src/examples/v8.0.0/meshAndShaders/texturedMeshBasic.js @@ -0,0 +1,55 @@ +import { Application, Assets, Point, Container, MeshRope } from 'pixi.js'; + +(async () => +{ + // Create a new application + const app = new Application(); + + // Initialize the application + await app.init({ resizeTo: window }); + + // Append the application canvas to the document body + document.body.appendChild(app.canvas); + + // Load the snake texture + const texture = await Assets.load('https://pixijs.com/assets/snake.png'); + + let count = 0; + + // Build a rope from points! + const ropeLength = 918 / 20; + const points = []; + + for (let i = 0; i < 20; i++) + { + points.push(new Point(i * ropeLength, 0)); + } + + // Create the snake MeshRope + const strip = new MeshRope({ texture, points }); + + strip.x = -459; + + const snakeContainer = new Container(); + + snakeContainer.x = 400; + snakeContainer.y = 300; + + snakeContainer.scale.set(800 / 1100); + app.stage.addChild(snakeContainer); + + snakeContainer.addChild(strip); + + // Animate the rope points + app.ticker.add(() => + { + count += 0.1; + + // make the snake + for (let i = 0; i < points.length; i++) + { + points[i].y = Math.sin(i * 0.5 + count) * 30; + points[i].x = i * ropeLength + Math.cos(i * 0.3 + count) * 20; + } + }); +})(); diff --git a/src/examples/v8.0.0/meshAndShaders/triangle.js b/src/examples/v8.0.0/meshAndShaders/triangle.js new file mode 100644 index 000000000..bdcacf75a --- /dev/null +++ b/src/examples/v8.0.0/meshAndShaders/triangle.js @@ -0,0 +1,47 @@ +import { Application, Geometry, Shader, Mesh } from 'pixi.js'; + +(async () => +{ + // Create a new application + const app = new Application(); + + // Initialize the application + await app.init({ resizeTo: window }); + + // Append the application canvas to the document body + document.body.appendChild(app.canvas); + + const geometry = new Geometry({ attribute: { aVertexPosition: [-100, -50, 100, -50, 0, 100] } }); + + const shader = Shader.from( + ` + precision mediump float; + attribute vec2 aVertexPosition; + + uniform mat3 translationMatrix; + uniform mat3 projectionMatrix; + + void main() { + gl_Position = vec4((projectionMatrix * translationMatrix * vec3(aVertexPosition, 1.0)).xy, 0.0, 1.0); + }`, + + `precision mediump float; + + void main() { + gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0); + } + + `, + ); + + const triangle = new Mesh(geometry, shader); + + triangle.position.set(400, 300); + + app.stage.addChild(triangle); + + app.ticker.add((delta) => + { + triangle.rotation += 0.01; + }); +})(); diff --git a/src/examples/v8.0.0/meshAndShaders/triangleColor.js b/src/examples/v8.0.0/meshAndShaders/triangleColor.js new file mode 100644 index 000000000..cb7f02d21 --- /dev/null +++ b/src/examples/v8.0.0/meshAndShaders/triangleColor.js @@ -0,0 +1,60 @@ +import { Application, Shader, Mesh, Geometry } from 'pixi.js'; + +(async () => +{ + // Create a new application + const app = new Application(); + + // Initialize the application + await app.init({ resizeTo: window }); + + // Append the application canvas to the document body + document.body.appendChild(app.canvas); + + const geometry = new Geometry({ + attributes: { + aVertexPosition: [-100, -50, 100, -50, 0, 100], + aColor: [1, 0, 0, 0, 1, 0, 0, 0, 1], + }, + }); + + const shader = Shader.from( + ` + precision mediump float; + attribute vec2 aVertexPosition; + attribute vec3 aColor; + + uniform mat3 translationMatrix; + uniform mat3 projectionMatrix; + + varying vec3 vColor; + + void main() { + + vColor = aColor; + gl_Position = vec4((projectionMatrix * translationMatrix * vec3(aVertexPosition, 1.0)).xy, 0.0, 1.0); + + }`, + `precision mediump float; + + varying vec3 vColor; + + void main() { + gl_FragColor = vec4(vColor, 1.0); + } + + `, + ); + + const triangle = new Mesh(geometry, shader); + + triangle.position.set(400, 300); + triangle.scale.set(2); + + app.stage.addChild(triangle); + + app.ticker.add(() => + { + triangle.rotation += 0.01; + }); +})(); diff --git a/src/examples/v8.0.0/meshAndShaders/triangleTextured.js b/src/examples/v8.0.0/meshAndShaders/triangleTextured.js new file mode 100644 index 000000000..8a5071fc5 --- /dev/null +++ b/src/examples/v8.0.0/meshAndShaders/triangleTextured.js @@ -0,0 +1,76 @@ +import { Application, Assets, Geometry, Shader, Texture, Mesh } from 'pixi.js'; + +(async () => +{ + // Create a new application + const app = new Application(); + + // Initialize the application + await app.init({ resizeTo: window }); + + // Append the application canvas to the document body + document.body.appendChild(app.canvas); + + // Load the texture + const texture = await Assets.load('https://pixijs.com/assets/bg_scene_rotate.jpg'); + + const geometry = new Geometry({ + attributes: { + aVertexPosition: [-100, -50, 100, -50, 0, 100], + aColor: [1, 0, 0, 0, 1, 0, 0, 0, 1], + aUvs: [0, 0, 1, 0, 1, 1], + }, + }); + + const vertexSrc = ` + + precision mediump float; + + attribute vec2 aVertexPosition; + attribute vec3 aColor; + attribute vec2 aUvs; + + uniform mat3 translationMatrix; + uniform mat3 projectionMatrix; + + varying vec2 vUvs; + varying vec3 vColor; + + void main() { + + vUvs = aUvs; + vColor = aColor; + gl_Position = vec4((projectionMatrix * translationMatrix * vec3(aVertexPosition, 1.0)).xy, 0.0, 1.0); + + }`; + + const fragmentSrc = ` + + precision mediump float; + + varying vec3 vColor; + varying vec2 vUvs; + + uniform sampler2D uSampler2; + + void main() { + + gl_FragColor = texture2D(uSampler2, vUvs) * vec4(vColor, 1.0); + }`; + + const uniforms = { uSampler2: texture }; + + const shader = Shader.from(vertexSrc, fragmentSrc, uniforms); + + const triangle = new Mesh(geometry, shader); + + triangle.position.set(400, 300); + triangle.scale.set(2); + + app.stage.addChild(triangle); + + app.ticker.add(() => + { + triangle.rotation += 0.01; + }); +})(); diff --git a/src/examples/v8.0.0/meshAndShaders/uniforms.js b/src/examples/v8.0.0/meshAndShaders/uniforms.js new file mode 100644 index 000000000..e15052d83 --- /dev/null +++ b/src/examples/v8.0.0/meshAndShaders/uniforms.js @@ -0,0 +1,78 @@ +import { Application, Assets, Geometry, Shader, Mesh } from 'js'; + +(async () => +{ + // Create a new application + const app = new Application(); + + // Initialize the application + await app.init({ resizeTo: window }); + + // Append the application canvas to the document body + document.body.appendChild(app.canvas); + + // Load the texture + const texture = await Assets.load('https://pixijs.com/assets/bg_scene_rotate.jpg'); + + const geometry = new Geometry({ + attributes: { + aVertexPosition: [-100, -100, 100, -100, 100, 100, -100, 100], + aUvs: [0, 0, 1, 0, 1, 1, 0, 1], + indexBuffer: [0, 1, 2, 0, 2, 3], + }, + }); + + const vertexSrc = ` + + precision mediump float; + + attribute vec2 aVertexPosition; + attribute vec2 aUvs; + + uniform mat3 translationMatrix; + uniform mat3 projectionMatrix; + + varying vec2 vUvs; + + void main() { + + vUvs = aUvs; + gl_Position = vec4((projectionMatrix * translationMatrix * vec3(aVertexPosition, 1.0)).xy, 0.0, 1.0); + + }`; + + const fragmentSrc = ` + + precision mediump float; + + varying vec2 vUvs; + + uniform sampler2D uSampler2; + uniform float time; + + void main() { + + gl_FragColor = texture2D(uSampler2, vUvs + sin( (time + (vUvs.x) * 14.) ) * 0.1 ); + }`; + + const uniforms = { + uSampler2: texture, + time: 0, + }; + + const shader = Shader.from(vertexSrc, fragmentSrc, uniforms); + + const quad = new Mesh(geometry, shader); + + quad.position.set(400, 300); + quad.scale.set(2); + + app.stage.addChild(quad); + + // Start the animation.. + app.ticker.add((delta) => + { + quad.rotation += 0.01; + quad.shader.uniforms.time += 0.1; + }); +})(); diff --git a/src/examples/v8.0.0/offscreenCanvas/basic.js b/src/examples/v8.0.0/offscreenCanvas/basic.js new file mode 100644 index 000000000..455229a0b --- /dev/null +++ b/src/examples/v8.0.0/offscreenCanvas/basic.js @@ -0,0 +1,52 @@ +import { Application, Assets, Container, Sprite } from 'pixi.js'; + +// This example is the based on basic/container, but using OffscreenCanvas. + +const canvas = document.createElement('canvas'); +const view = canvas.transferControlToOffscreen(); + +(async () => +{ + // Create a new application + const app = new Application(); + + // Initialize the application + await app.init({ view, background: '#1099bb', resizeTo: window }); + + // Append the application canvas to the document body + document.body.appendChild(app.canvas); + + const container = new Container(); + + app.stage.addChild(container); + + // Load the bunny texture + const texture = await Assets.load('https://pixijs.com/assets/bunny.png'); + + // Create a 5x5 grid of bunnies + for (let i = 0; i < 25; i++) + { + const bunny = new Sprite(texture); + + bunny.anchor.set(0.5); + bunny.x = (i % 5) * 40; + bunny.y = Math.floor(i / 5) * 40; + container.addChild(bunny); + } + + // Move container to the center + container.x = app.screen.width / 2; + container.y = app.screen.height / 2; + + // Center bunny sprite in local container coordinates + container.pivot.x = container.width / 2; + container.pivot.y = container.height / 2; + + // Listen for animate update + app.ticker.add((time) => + { + // Rotate the container! + // * use delta to create frame-independent transform * + container.rotation -= 0.01 * time.deltaTime; + }); +})(); diff --git a/src/examples/v8.0.0-rc/offscreenCanvas/webWorker.js b/src/examples/v8.0.0/offscreenCanvas/webWorker.js similarity index 100% rename from src/examples/v8.0.0-rc/offscreenCanvas/webWorker.js rename to src/examples/v8.0.0/offscreenCanvas/webWorker.js diff --git a/src/examples/v8.0.0/sprite/animatedSpriteAnimationSpeed.js b/src/examples/v8.0.0/sprite/animatedSpriteAnimationSpeed.js new file mode 100644 index 000000000..4dda72f68 --- /dev/null +++ b/src/examples/v8.0.0/sprite/animatedSpriteAnimationSpeed.js @@ -0,0 +1,55 @@ +import { Application, Assets, AnimatedSprite, Texture } from 'pixi.js'; + +(async () => +{ + // Create a new application + const app = new Application(); + + // Initialize the application + await app.init({ autoStart: false, resizeTo: window }); + + // Append the application canvas to the document body + document.body.appendChild(app.canvas); + + // Load the animation sprite sheet + const spritesheet = await Assets.load('https://pixijs.com/assets/spritesheet/0123456789.json'); + + // Create an array to store the textures + const textures = []; + let i; + + for (i = 0; i < 10; i++) + { + const framekey = `0123456789 ${i}.ase`; + const texture = Texture.from(framekey); + const time = spritesheet.data.frames[framekey].duration; + + textures.push({ texture, time }); + } + + const scaling = 4; + + // Create a slow AnimatedSprite + const slow = new AnimatedSprite(textures); + + slow.anchor.set(0.5); + slow.scale.set(scaling); + slow.animationSpeed = 0.5; + slow.x = (app.screen.width - slow.width) / 2; + slow.y = app.screen.height / 2; + slow.play(); + app.stage.addChild(slow); + + // Create a fast AnimatedSprite + const fast = new AnimatedSprite(textures); + + fast.anchor.set(0.5); + fast.scale.set(scaling); + fast.x = (app.screen.width + fast.width) / 2; + fast.y = app.screen.height / 2; + fast.play(); + app.stage.addChild(fast); + + // Start animating + app.start(); +})(); diff --git a/src/examples/v8.0.0/sprite/animatedSpriteExplosion.js b/src/examples/v8.0.0/sprite/animatedSpriteExplosion.js new file mode 100644 index 000000000..6c88226a2 --- /dev/null +++ b/src/examples/v8.0.0/sprite/animatedSpriteExplosion.js @@ -0,0 +1,45 @@ +import { Application, Assets, AnimatedSprite, Texture } from 'pixi.js'; + +(async () => +{ + // Create a new application + const app = new Application(); + + // Initialize the application + await app.init({ autoStart: false, resizeTo: window }); + + // Append the application canvas to the document body + document.body.appendChild(app.canvas); + + // Load the animation sprite sheet + const texture = await Assets.load('https://pixijs.com/assets/spritesheet/mc.json'); + + // Create an array to store the textures + const explosionTextures = []; + let i; + + for (i = 0; i < 26; i++) + { + const texture = Texture.from(`Explosion_Sequence_A ${i + 1}.png`); + + explosionTextures.push(texture); + } + + // Create and randomly place the animated explosion sprites on the stage + for (i = 0; i < 50; i++) + { + // Create an explosion AnimatedSprite + const explosion = new AnimatedSprite(explosionTextures); + + explosion.x = Math.random() * app.screen.width; + explosion.y = Math.random() * app.screen.height; + explosion.anchor.set(0.5); + explosion.rotation = Math.random() * Math.PI; + explosion.scale.set(0.75 + Math.random() * 0.5); + explosion.gotoAndPlay((Math.random() * 26) | 0); + app.stage.addChild(explosion); + } + + // Start animating + app.start(); +})(); diff --git a/src/examples/v8.0.0/sprite/animatedSpriteJet.js b/src/examples/v8.0.0/sprite/animatedSpriteJet.js new file mode 100644 index 000000000..4a0fc8b59 --- /dev/null +++ b/src/examples/v8.0.0/sprite/animatedSpriteJet.js @@ -0,0 +1,48 @@ +import { Application, Assets, AnimatedSprite, Texture } from 'pixi.js'; + +(async () => +{ + // Create a new application + const app = new Application(); + + // Initialize the application + await app.init({ background: '#1099bb', resizeTo: window }); + + // Append the application canvas to the document body + document.body.appendChild(app.canvas); + + // Load the animation sprite sheet + await Assets.load('https://pixijs.com/assets/spritesheet/fighter.json'); + + // Create an array of textures from the sprite sheet + const frames = []; + + for (let i = 0; i < 30; i++) + { + const val = i < 10 ? `0${i}` : i; + + // Magically works since the spritesheet was loaded with the pixi loader + frames.push(Texture.from(`rollSequence00${val}.png`)); + } + + // Create an AnimatedSprite (brings back memories from the days of Flash, right ?) + const anim = new AnimatedSprite(frames); + + /* + * An AnimatedSprite inherits all the properties of a PIXI sprite + * so you can change its position, its anchor, mask it, etc + */ + anim.x = app.screen.width / 2; + anim.y = app.screen.height / 2; + anim.anchor.set(0.5); + anim.animationSpeed = 0.5; + anim.play(); + + app.stage.addChild(anim); + + // Animate the rotation + app.ticker.add(() => + { + anim.rotation += 0.01; + }); +})(); diff --git a/src/examples/v8.0.0/sprite/basic.js b/src/examples/v8.0.0/sprite/basic.js new file mode 100644 index 000000000..5955df274 --- /dev/null +++ b/src/examples/v8.0.0/sprite/basic.js @@ -0,0 +1,37 @@ +import { Application, Assets, Sprite } from 'pixi.js'; + +(async () => +{ + // Create a new application + const app = new Application(); + + // Initialize the application + await app.init({ background: '#1099bb', resizeTo: window }); + + // Append the application canvas to the document body + document.body.appendChild(app.canvas); + + // Load the bunny texture + const texture = await Assets.load('https://pixijs.com/assets/bunny.png'); + + // Create a bunny Sprite + const bunny = new Sprite(texture); + + // Center the sprite's anchor point + bunny.anchor.set(0.5); + + // Move the sprite to the center of the screen + bunny.x = app.screen.width / 2; + bunny.y = app.screen.height / 2; + + app.stage.addChild(bunny); + + // Listen for animate update + app.ticker.add((time) => + { + // Just for fun, let's rotate mr rabbit a little. + // * Delta is 1 if running at 100% performance * + // * Creates frame-independent transformation * + bunny.rotation += 0.1 * time.deltaTime; + }); +})(); diff --git a/src/examples/v8.0.0/sprite/textureSwap.js b/src/examples/v8.0.0/sprite/textureSwap.js new file mode 100644 index 000000000..0898a6e98 --- /dev/null +++ b/src/examples/v8.0.0/sprite/textureSwap.js @@ -0,0 +1,47 @@ +import { Application, Assets, Texture, Sprite } from 'pixi.js'; + +(async () => +{ + // Create a new application + const app = new Application(); + + // Initialize the application + await app.init({ background: '#1099bb', resizeTo: window }); + + // Append the application canvas to the document body + document.body.appendChild(app.canvas); + + // Load the textures + const alien1texture = await Assets.load('https://pixijs.com/assets/flowerTop.png'); + const alien2texture = await Assets.load('https://pixijs.com/assets/eggHead.png'); + + let isAlien1 = true; + + // Create a new alien Sprite using the 1st texture and add it to the stage + const character = new Sprite(alien1texture); + + // Center the sprites anchor point + character.anchor.set(0.5); + + // Move the sprite to the center of the screen + character.x = app.screen.width / 2; + character.y = app.screen.height / 2; + + app.stage.addChild(character); + + // Make the sprite interactive + character.eventMode = 'static'; + character.cursor = 'pointer'; + + character.on('pointertap', () => + { + isAlien1 = !isAlien1; + // Dynamically swap the texture + character.texture = isAlien1 ? alien1texture : alien2texture; + }); + + app.ticker.add(() => + { + character.rotation += 0.02; + }); +})(); diff --git a/src/examples/v8.0.0/sprite/tilingSprite.js b/src/examples/v8.0.0/sprite/tilingSprite.js new file mode 100644 index 000000000..576327c1b --- /dev/null +++ b/src/examples/v8.0.0/sprite/tilingSprite.js @@ -0,0 +1,42 @@ +import { Application, Assets, TilingSprite } from 'pixi.js'; + +(async () => +{ + // Create a new application + const app = new Application(); + + // Initialize the application + await app.init({ resizeTo: window }); + + // Append the application canvas to the document body + document.body.appendChild(app.canvas); + + // Load the tile texture + const texture = await Assets.load('https://pixijs.com/assets/p2.jpeg'); + + /* Create a tiling sprite and add it to the stage... + * requires a texture, a width and a height + * in WebGL the image size should preferably be a power of two + */ + const tilingSprite = new TilingSprite({ + texture, + width: app.screen.width, + height: app.screen.height, + }); + + app.stage.addChild(tilingSprite); + + let count = 0; + + // Animate the tiling sprite + app.ticker.add(() => + { + count += 0.005; + + tilingSprite.tileScale.x = 2 + Math.sin(count); + tilingSprite.tileScale.y = 2 + Math.cos(count); + + tilingSprite.tilePosition.x += 1; + tilingSprite.tilePosition.y += 1; + }); +})(); diff --git a/src/examples/v8.0.0/sprite/video.js b/src/examples/v8.0.0/sprite/video.js new file mode 100644 index 000000000..e607efe76 --- /dev/null +++ b/src/examples/v8.0.0/sprite/video.js @@ -0,0 +1,60 @@ +import { Application, Assets, Graphics, Sprite } from 'pixi.js'; + +(async () => +{ + // Create a new application + const app = new Application(); + + // Initialize the application + await app.init({ resizeTo: window }); + + // Append the application canvas to the document body + document.body.appendChild(app.canvas); + + // Create play button that can be used to trigger the video + const button = new Graphics() + .roundRect(0, 0, 100, 100, 10) + .fill(0xffffff, 0.5) + .beginPath() + .moveTo(36, 30) + .lineTo(36, 70) + .lineTo(70, 50) + .closePath() + .fill(0xffffff); + + // Position the button + button.x = (app.screen.width - button.width) / 2; + button.y = (app.screen.height - button.height) / 2; + + // Enable interactivity on the button + button.eventMode = 'static'; + button.cursor = 'pointer'; + + // Add to the stage + app.stage.addChild(button); + + // Load the video texture + const texture = await Assets.load('https://pixijs.com/assets/video.mp4'); + + // Listen for a click/tap event to start playing the video + // this is useful for some mobile platforms. For example: + // ios9 and under cannot render videos in PIXI without a + // polyfill - https://github.com/bfred-it/iphone-inline-video + // ios10 and above require a click/tap event to render videos + // that contain audio in PIXI. Videos with no audio track do + // not have this requirement + button.on('pointertap', () => + { + // Don't need the button anymore + button.destroy(); + + // Create a new Sprite using the video texture (yes it's that easy) + const videoSprite = new Sprite(texture); + + // Stretch to fill the whole screen + videoSprite.width = app.screen.width; + videoSprite.height = app.screen.height; + + app.stage.addChild(videoSprite); + }); +})(); diff --git a/src/examples/v8.0.0/text/bitmapText.js b/src/examples/v8.0.0/text/bitmapText.js new file mode 100644 index 000000000..2da0aa753 --- /dev/null +++ b/src/examples/v8.0.0/text/bitmapText.js @@ -0,0 +1,31 @@ +import { Application, Assets, Text } from 'pixi.js'; + +(async () => +{ + // Create a new application + const app = new Application(); + + // Initialize the application + await app.init({ background: '#1099bb', resizeTo: window }); + + // Append the application canvas to the document body + document.body.appendChild(app.canvas); + + // Load bitmap font + await Assets.load('https://pixijs.com/assets/bitmap-font/desyrel.xml'); + + const bitmapFontText = new Text({ + text: 'bitmap fonts are supported!\nWoo yay!', + style: { + fontFamily: 'Desyrel', + fontSize: 55, + align: 'left', + }, + renderMode: 'bitmap', + }); + + bitmapFontText.x = 50; + bitmapFontText.y = 200; + + app.stage.addChild(bitmapFontText); +})(); diff --git a/src/examples/v8.0.0/text/fromFont.js b/src/examples/v8.0.0/text/fromFont.js new file mode 100644 index 000000000..0e83b6bf8 --- /dev/null +++ b/src/examples/v8.0.0/text/fromFont.js @@ -0,0 +1,38 @@ +import { Application, Assets, Text } from 'pixi.js'; + +(async () => +{ + // Create a new application + const app = new Application(); + + // Initialize the application + await app.init({ background: '#1099bb', resizeTo: window }); + + // Append the application canvas to the document body + document.body.appendChild(app.canvas); + + // Add font files to the bundle + Assets.addBundle('fonts', [ + { alias: 'ChaChicle', src: 'https://pixijs.com/assets/webfont-loader/ChaChicle.ttf' }, + { alias: 'Lineal', src: 'https://pixijs.com/assets/webfont-loader/Lineal.otf' }, + { alias: 'Dotrice Regular', src: 'https://pixijs.com/assets/webfont-loader/Dotrice-Regular.woff' }, + { alias: 'Crosterian', src: 'https://pixijs.com/assets/webfont-loader/Crosterian.woff2' }, + ]); + + // Load the font bundle + await Assets.loadBundle('fonts'); + + const text1 = new Text({ text: 'ChaChicle.ttf', style: { fontFamily: 'ChaChicle', fontSize: 50 } }); + const text2 = new Text({ text: 'Lineal.otf', style: { fontFamily: 'Lineal', fontSize: 50 } }); + const text3 = new Text({ text: 'Dotrice Regular.woff', style: { fontFamily: 'Dotrice Regular', fontSize: 50 } }); + const text4 = new Text({ text: 'Crosterian.woff2', style: { fontFamily: 'Crosterian', fontSize: 50 } }); + + text2.y = 150; + text3.y = 300; + text4.y = 450; + + app.stage.addChild(text1); + app.stage.addChild(text2); + app.stage.addChild(text3); + app.stage.addChild(text4); +})(); diff --git a/src/examples/v8.0.0/text/pixiText.js b/src/examples/v8.0.0/text/pixiText.js new file mode 100644 index 000000000..7d96c9df0 --- /dev/null +++ b/src/examples/v8.0.0/text/pixiText.js @@ -0,0 +1,86 @@ +import { Application, Text, TextStyle, Color, FillGradient } from 'pixi.js'; + +(async () => +{ + // Create a new application + const app = new Application(); + + // Initialize the application + await app.init({ background: '#1099bb', resizeTo: window }); + + // Append the application canvas to the document body + document.body.appendChild(app.canvas); + + const basicText = new Text({ text: 'Basic text in pixi' }); + + basicText.x = 50; + basicText.y = 100; + + app.stage.addChild(basicText); + + // Create gradient fill + const fill = new FillGradient(0, 0, 0, 36 * 1.7 * 7); + + const colors = [0xffffff, 0x00ff99].map((color) => Color.shared.setValue(color).toNumber()); + + colors.forEach((number, index) => + { + const ratio = index / colors.length; + + fill.addColorStop(ratio, number); + }); + + const style = new TextStyle({ + fontFamily: 'Arial', + fontSize: 36, + fontStyle: 'italic', + fontWeight: 'bold', + fill: { fill }, + stroke: { color: '#4a1850', width: 5, join: 'round' }, + dropShadow: { + color: '#000000', + blur: 4, + angle: Math.PI / 6, + distance: 6, + }, + wordWrap: true, + wordWrapWidth: 440, + }); + + const richText = new Text({ + text: 'Rich text with a lot of options and across multiple lines', + style, + }); + + richText.x = 50; + richText.y = 220; + + app.stage.addChild(richText); + + const skewStyle = new TextStyle({ + fontFamily: 'Arial', + dropShadow: { + alpha: 0.8, + angle: 2.1, + blur: 4, + color: '0x111111', + distance: 10, + }, + fill: '#ffffff', + stroke: { color: '#004620', width: 12, join: 'round' }, + fontSize: 60, + fontWeight: 'lighter', + }); + + const skewText = new Text({ + text: 'SKEW IS COOL', + style: skewStyle, + }); + + skewText.skew.set(0.65, -0.3); + skewText.anchor.set(0.5, 0.5); + skewText.x = 300; + skewText.y = 480; + + app.stage.addChild(skewText); +})(); diff --git a/src/examples/v8.0.0-rc/text/webFont.js b/src/examples/v8.0.0/text/webFont.js similarity index 67% rename from src/examples/v8.0.0-rc/text/webFont.js rename to src/examples/v8.0.0/text/webFont.js index be529a431..1f7ada7f1 100644 --- a/src/examples/v8.0.0-rc/text/webFont.js +++ b/src/examples/v8.0.0/text/webFont.js @@ -1,8 +1,4 @@ -import * as PIXI from 'pixi.js'; - -const app = new PIXI.Application({ background: '#1099bb', resizeTo: window }); - -document.body.appendChild(app.view); +import { Application, Text } from 'pixi.js'; // Load them google fonts before starting... window.WebFontConfig = { @@ -29,9 +25,18 @@ window.WebFontConfig = { })(); /* eslint-enabled */ -function init() { +async function init() { + // Create a new application + const app = new Application(); + + // Initialize the application + await app.init({ background: '#1099bb', resizeTo: window }); + + // Append the application canvas to the document body + document.body.appendChild(app.canvas); + // create some white text using the Snippet webfont - const textSample = new PIXI.Text('PixiJS text using the\ncustom "Snippet" Webfont', { + const textSample = new Text('PixiJS text using the\ncustom "Snippet" Webfont', { fontFamily: 'Snippet', fontSize: 50, fill: 'white', diff --git a/src/examples/v8.0.0/textures/renderTextureAdvanced.js b/src/examples/v8.0.0/textures/renderTextureAdvanced.js new file mode 100644 index 000000000..ae1efcb1a --- /dev/null +++ b/src/examples/v8.0.0/textures/renderTextureAdvanced.js @@ -0,0 +1,108 @@ +import { Application, Assets, Container, Sprite, RenderTexture } from 'pixi.js'; + +(async () => +{ + // Create a new application + const app = new Application(); + + // Initialize the application + await app.init({ resizeTo: window }); + + // Append the application canvas to the document body + document.body.appendChild(app.canvas); + + const stageSize = { + width: app.screen.width, + height: app.screen.height, + }; + + // Create two render textures... these dynamic textures will be used to draw the scene into itself + let renderTexture = RenderTexture.create(stageSize); + let renderTexture2 = RenderTexture.create(stageSize); + const currentTexture = renderTexture; + + // Create a new sprite that uses the render texture we created above + const outputSprite = new Sprite(currentTexture); + + // Align the sprite + outputSprite.x = 400; + outputSprite.y = 300; + outputSprite.anchor.set(0.5); + + // Add to stage + app.stage.addChild(outputSprite); + + const stuffContainer = new Container(); + + stuffContainer.x = 400; + stuffContainer.y = 300; + + app.stage.addChild(stuffContainer); + + // Create an array of image ids.. + const fruits = [ + 'https://pixijs.com/assets/rt_object_01.png', + 'https://pixijs.com/assets/rt_object_02.png', + 'https://pixijs.com/assets/rt_object_03.png', + 'https://pixijs.com/assets/rt_object_04.png', + 'https://pixijs.com/assets/rt_object_05.png', + 'https://pixijs.com/assets/rt_object_06.png', + 'https://pixijs.com/assets/rt_object_07.png', + 'https://pixijs.com/assets/rt_object_08.png', + ]; + + // Load the textures + await Assets.load(fruits); + + // Create an array of items + const items = []; + + // Now create some items and randomly position them in the stuff container + for (let i = 0; i < 20; i++) + { + const item = Sprite.from(fruits[i % fruits.length]); + + item.x = Math.random() * 400 - 200; + item.y = Math.random() * 400 - 200; + item.anchor.set(0.5); + stuffContainer.addChild(item); + items.push(item); + } + + // Used for spinning! + let count = 0; + + app.ticker.add(() => + { + for (let i = 0; i < items.length; i++) + { + // rotate each item + const item = items[i]; + + item.rotation += 0.1; + } + + count += 0.01; + + // Swap the buffers ... + const temp = renderTexture; + + renderTexture = renderTexture2; + renderTexture2 = temp; + + // Set the new texture + outputSprite.texture = renderTexture; + + // Twist this up! + stuffContainer.rotation -= 0.01; + outputSprite.scale.set(1 + Math.sin(count) * 0.2); + + // Render the stage to the texture + // * The 'true' clears the texture before the content is rendered * + app.renderer.render({ + container: app.stage, + target: renderTexture2, + clear: false, + }); + }); +})(); diff --git a/src/examples/v8.0.0/textures/renderTextureBasic.js b/src/examples/v8.0.0/textures/renderTextureBasic.js new file mode 100644 index 000000000..bdbb3a46e --- /dev/null +++ b/src/examples/v8.0.0/textures/renderTextureBasic.js @@ -0,0 +1,57 @@ +import { Application, Assets, Container, Sprite, RenderTexture, SCALE_MODES } from 'pixi.js'; + +(async () => +{ + // Create a new application + const app = new Application(); + + // Initialize the application + await app.init({ background: '#1099bb', resizeTo: window }); + + // Append the application canvas to the document body + document.body.appendChild(app.canvas); + + const container = new Container(); + + app.stage.addChild(container); + + // Load the bunny texture + const texture = await Assets.load('https://pixijs.com/assets/bunny.png'); + + for (let i = 0; i < 25; i++) + { + const bunny = new Sprite(texture); + + bunny.x = (i % 5) * 30; + bunny.y = Math.floor(i / 5) * 30; + bunny.rotation = Math.random() * (Math.PI * 2); + container.addChild(bunny); + } + + const rt = RenderTexture.create({ + width: 300, + height: 300, + scaleMode: SCALE_MODES.LINEAR, + resolution: 1, + }); + + const sprite = new Sprite(rt); + + sprite.x = 450; + sprite.y = 60; + app.stage.addChild(sprite); + + /* + * All the bunnies are added to the container with the addChild method + * when you do this, all the bunnies become children of the container, and when a container moves, + * so do all its children. + * This gives you a lot of flexibility and makes it easier to position elements on the screen + */ + container.x = 100; + container.y = 60; + + app.ticker.add(() => + { + app.renderer.render(container, { renderTexture: rt }); + }); +})(); diff --git a/src/examples/v8.0.0/textures/textureRotate.js b/src/examples/v8.0.0/textures/textureRotate.js new file mode 100644 index 000000000..22c883dff --- /dev/null +++ b/src/examples/v8.0.0/textures/textureRotate.js @@ -0,0 +1,85 @@ +import { Application, Assets, Texture, Rectangle, Sprite, Text, groupD8 } from 'pixi.js'; + +(async () => +{ + // Create a new application + const app = new Application(); + + // Initialize the application + await app.init({ resizeTo: window }); + + // Append the application canvas to the document body + document.body.appendChild(app.canvas); + + // Load the texture + const texture = await Assets.load('https://pixijs.com/assets/flowerTop.png'); + + // Create rotated textures + const textures = [texture]; + const D8 = groupD8; + + for (let rotate = 1; rotate < 16; rotate++) + { + const h = D8.isVertical(rotate) ? texture.frame.width : texture.frame.height; + const w = D8.isVertical(rotate) ? texture.frame.height : texture.frame.width; + + const { frame } = texture; + const crop = new Rectangle(texture.frame.x, texture.frame.y, w, h); + const trim = crop; + let rotatedTexture; + + if (rotate % 2 === 0) + { + rotatedTexture = new Texture({ + source: texture.baseTexture, + frame, + orig: crop, + trim, + rotate, + }); + } + else + { + rotatedTexture = new Texture({ + source: texture.baseTexture, + frame, + orig: crop, + trim, + rotate, + }); + } + textures.push(rotatedTexture); + } + + const offsetX = (app.screen.width / 16) | 0; + const offsetY = (app.screen.height / 8) | 0; + const gridW = (app.screen.width / 4) | 0; + const gridH = (app.screen.height / 5) | 0; + + // Normal rotations and mirrors + for (let i = 0; i < 16; i++) + { + // Create a new Sprite using rotated texture + const dude = new Sprite(textures[i < 8 ? i * 2 : (i - 8) * 2 + 1]); + + dude.scale.x = 0.5; + dude.scale.y = 0.5; + // Show it in grid + dude.x = offsetX + gridW * (i % 4); + dude.y = offsetY + gridH * ((i / 4) | 0); + app.stage.addChild(dude); + const text = new Text({ + text: `rotate = ${dude.texture.rotate}`, + style: { + fontFamily: 'Courier New', + fontSize: '12px', + fill: 'white', + align: 'left', + }, + }); + + text.x = dude.x; + text.y = dude.y - 20; + app.stage.addChild(text); + } +})(); diff --git a/src/theme/Footer/index.js b/src/theme/Footer/index.js index 60ee9b3cb..4d075f4ed 100644 --- a/src/theme/Footer/index.js +++ b/src/theme/Footer/index.js @@ -14,9 +14,9 @@ function Footer() const { pathname } = useLocation(); // List the paths where you don't want to show the footer - const noFooterPaths = ['/tutorials', '/playground']; + const noFooterPaths = ['tutorials', 'playground']; - if (!footer || noFooterPaths.includes(pathname)) + if (!footer || noFooterPaths.some((path) => pathname.includes(path))) { return null; } diff --git a/src/theme/Navbar/Content/index.js b/src/theme/Navbar/Content/index.js index 1c3afaaa2..9249a198e 100644 --- a/src/theme/Navbar/Content/index.js +++ b/src/theme/Navbar/Content/index.js @@ -51,19 +51,22 @@ export default function NavbarContent() const socialItems = []; const isBrowser = useIsBrowser(); + const socialsThreshold = 1423; + const searchThreshold = 1479; + const mobileThreshold = 996; const [navbar, setNavbar] = useState({ - socials: isBrowser ? window.innerWidth > 1423 : true, - search: isBrowser ? window.innerWidth > 1479 : true, - mobile: isBrowser ? window.innerWidth < 996 : false, + socials: isBrowser ? window.innerWidth > socialsThreshold : true, + search: isBrowser ? window.innerWidth > searchThreshold : true, + mobile: isBrowser ? window.innerWidth < mobileThreshold : false, }); const resetEditorLayout = () => { setNavbar({ - socials: window.innerWidth > 1423, - search: window.innerWidth > 1479, - mobile: window.innerWidth < 996, + socials: window.innerWidth > socialsThreshold, + search: window.innerWidth > searchThreshold, + mobile: window.innerWidth < mobileThreshold, }); }; @@ -88,6 +91,8 @@ export default function NavbarContent() else navItems.push(item); }); + console.log(navbar); + return ( > = { - '7.3.2': v7x, - '8.0.0-rc': v8x, + 'v7.0.0': v7x, + 'v8.0.0': v8x, }; +function getBestVersion(version: string) +{ + const isPrerelease = prerelease(version); + const versionToCompare = isPrerelease ? `${major(version)}.${minor(version)}.${patch(version)}` : version; + + // Get the keys of the versions object and filter them to find the best match + const bestMatch = Object.keys(versions) + .filter((name) => valid(name) && lte(name, versionToCompare)) + .sort((a, b) => rcompare(a, b))[0]; + + // Return the entries and options of the best match + return versions[bestMatch]; +} + export function getTutorialEntry(version: string, key: string) { - return versions[version]?.[key]; + const bestVersion = getBestVersion(version); + + return bestVersion?.[key]; } diff --git a/src/tutorials/v7.3.2/gettingStarted/index.ts b/src/tutorials/v7.0.0/gettingStarted/index.ts similarity index 100% rename from src/tutorials/v7.3.2/gettingStarted/index.ts rename to src/tutorials/v7.0.0/gettingStarted/index.ts diff --git a/src/tutorials/v7.3.2/gettingStarted/step1-code.js b/src/tutorials/v7.0.0/gettingStarted/step1-code.js similarity index 100% rename from src/tutorials/v7.3.2/gettingStarted/step1-code.js rename to src/tutorials/v7.0.0/gettingStarted/step1-code.js diff --git a/src/tutorials/v7.3.2/gettingStarted/step1-content.md b/src/tutorials/v7.0.0/gettingStarted/step1-content.md similarity index 100% rename from src/tutorials/v7.3.2/gettingStarted/step1-content.md rename to src/tutorials/v7.0.0/gettingStarted/step1-content.md diff --git a/src/tutorials/v7.3.2/gettingStarted/step2-code.js b/src/tutorials/v7.0.0/gettingStarted/step2-code.js similarity index 100% rename from src/tutorials/v7.3.2/gettingStarted/step2-code.js rename to src/tutorials/v7.0.0/gettingStarted/step2-code.js diff --git a/src/tutorials/v7.3.2/gettingStarted/step2-completed-code.js b/src/tutorials/v7.0.0/gettingStarted/step2-completed-code.js similarity index 100% rename from src/tutorials/v7.3.2/gettingStarted/step2-completed-code.js rename to src/tutorials/v7.0.0/gettingStarted/step2-completed-code.js diff --git a/src/tutorials/v7.3.2/gettingStarted/step2-content.md b/src/tutorials/v7.0.0/gettingStarted/step2-content.md similarity index 100% rename from src/tutorials/v7.3.2/gettingStarted/step2-content.md rename to src/tutorials/v7.0.0/gettingStarted/step2-content.md diff --git a/src/tutorials/v7.3.2/gettingStarted/step3-code.js b/src/tutorials/v7.0.0/gettingStarted/step3-code.js similarity index 100% rename from src/tutorials/v7.3.2/gettingStarted/step3-code.js rename to src/tutorials/v7.0.0/gettingStarted/step3-code.js diff --git a/src/tutorials/v7.3.2/gettingStarted/step3-completed-code.js b/src/tutorials/v7.0.0/gettingStarted/step3-completed-code.js similarity index 100% rename from src/tutorials/v7.3.2/gettingStarted/step3-completed-code.js rename to src/tutorials/v7.0.0/gettingStarted/step3-completed-code.js diff --git a/src/tutorials/v7.3.2/gettingStarted/step3-content.md b/src/tutorials/v7.0.0/gettingStarted/step3-content.md similarity index 100% rename from src/tutorials/v7.3.2/gettingStarted/step3-content.md rename to src/tutorials/v7.0.0/gettingStarted/step3-content.md diff --git a/src/tutorials/v7.3.2/gettingStarted/step4-code.js b/src/tutorials/v7.0.0/gettingStarted/step4-code.js similarity index 100% rename from src/tutorials/v7.3.2/gettingStarted/step4-code.js rename to src/tutorials/v7.0.0/gettingStarted/step4-code.js diff --git a/src/tutorials/v7.3.2/gettingStarted/step4-content.md b/src/tutorials/v7.0.0/gettingStarted/step4-content.md similarity index 100% rename from src/tutorials/v7.3.2/gettingStarted/step4-content.md rename to src/tutorials/v7.0.0/gettingStarted/step4-content.md diff --git a/src/tutorials/v7.3.2/index.ts b/src/tutorials/v7.0.0/index.ts similarity index 100% rename from src/tutorials/v7.3.2/index.ts rename to src/tutorials/v7.0.0/index.ts diff --git a/src/tutorials/v7.3.2/tutorialsData.json b/src/tutorials/v7.0.0/tutorialsData.json similarity index 100% rename from src/tutorials/v7.3.2/tutorialsData.json rename to src/tutorials/v7.0.0/tutorialsData.json diff --git a/src/tutorials/v8.0.0-rc/gettingStarted/index.ts b/src/tutorials/v8.0.0/gettingStarted/index.ts similarity index 100% rename from src/tutorials/v8.0.0-rc/gettingStarted/index.ts rename to src/tutorials/v8.0.0/gettingStarted/index.ts diff --git a/src/tutorials/v8.0.0-rc/gettingStarted/step1-code.js b/src/tutorials/v8.0.0/gettingStarted/step1-code.js similarity index 100% rename from src/tutorials/v8.0.0-rc/gettingStarted/step1-code.js rename to src/tutorials/v8.0.0/gettingStarted/step1-code.js diff --git a/src/tutorials/v8.0.0-rc/gettingStarted/step1-content.md b/src/tutorials/v8.0.0/gettingStarted/step1-content.md similarity index 100% rename from src/tutorials/v8.0.0-rc/gettingStarted/step1-content.md rename to src/tutorials/v8.0.0/gettingStarted/step1-content.md diff --git a/src/tutorials/v8.0.0-rc/gettingStarted/step2-code.js b/src/tutorials/v8.0.0/gettingStarted/step2-code.js similarity index 100% rename from src/tutorials/v8.0.0-rc/gettingStarted/step2-code.js rename to src/tutorials/v8.0.0/gettingStarted/step2-code.js diff --git a/src/tutorials/v8.0.0-rc/gettingStarted/step2-completed-code.js b/src/tutorials/v8.0.0/gettingStarted/step2-completed-code.js similarity index 100% rename from src/tutorials/v8.0.0-rc/gettingStarted/step2-completed-code.js rename to src/tutorials/v8.0.0/gettingStarted/step2-completed-code.js diff --git a/src/tutorials/v8.0.0-rc/gettingStarted/step2-content.md b/src/tutorials/v8.0.0/gettingStarted/step2-content.md similarity index 100% rename from src/tutorials/v8.0.0-rc/gettingStarted/step2-content.md rename to src/tutorials/v8.0.0/gettingStarted/step2-content.md diff --git a/src/tutorials/v8.0.0-rc/gettingStarted/step3-code.js b/src/tutorials/v8.0.0/gettingStarted/step3-code.js similarity index 100% rename from src/tutorials/v8.0.0-rc/gettingStarted/step3-code.js rename to src/tutorials/v8.0.0/gettingStarted/step3-code.js diff --git a/src/tutorials/v8.0.0-rc/gettingStarted/step3-completed-code.js b/src/tutorials/v8.0.0/gettingStarted/step3-completed-code.js similarity index 100% rename from src/tutorials/v8.0.0-rc/gettingStarted/step3-completed-code.js rename to src/tutorials/v8.0.0/gettingStarted/step3-completed-code.js diff --git a/src/tutorials/v8.0.0-rc/gettingStarted/step3-content.md b/src/tutorials/v8.0.0/gettingStarted/step3-content.md similarity index 100% rename from src/tutorials/v8.0.0-rc/gettingStarted/step3-content.md rename to src/tutorials/v8.0.0/gettingStarted/step3-content.md diff --git a/src/tutorials/v8.0.0-rc/gettingStarted/step4-code.js b/src/tutorials/v8.0.0/gettingStarted/step4-code.js similarity index 100% rename from src/tutorials/v8.0.0-rc/gettingStarted/step4-code.js rename to src/tutorials/v8.0.0/gettingStarted/step4-code.js diff --git a/src/tutorials/v8.0.0-rc/gettingStarted/step4-content.md b/src/tutorials/v8.0.0/gettingStarted/step4-content.md similarity index 100% rename from src/tutorials/v8.0.0-rc/gettingStarted/step4-content.md rename to src/tutorials/v8.0.0/gettingStarted/step4-content.md diff --git a/src/tutorials/v8.0.0-rc/index.ts b/src/tutorials/v8.0.0/index.ts similarity index 100% rename from src/tutorials/v8.0.0-rc/index.ts rename to src/tutorials/v8.0.0/index.ts diff --git a/src/tutorials/v8.0.0-rc/tutorialsData.json b/src/tutorials/v8.0.0/tutorialsData.json similarity index 100% rename from src/tutorials/v8.0.0-rc/tutorialsData.json rename to src/tutorials/v8.0.0/tutorialsData.json diff --git a/versioned_docs/version-7.3.2/guides/basics/getting-started.md b/versioned_docs/version-7.3.2/guides/basics/getting-started.md index 8c84ec24d..a58391bb2 100644 --- a/versioned_docs/version-7.3.2/guides/basics/getting-started.md +++ b/versioned_docs/version-7.3.2/guides/basics/getting-started.md @@ -91,7 +91,7 @@ What we're doing here is adding a JavaScript code block, and in that block creat When the PIXI.Application class creates the renderer, it builds a Canvas element that it will render *to*. In order to see what we draw with PixiJS, we need to add this Canvas element to the web page's DOM. Append the following line to your page's script block: -```JavaScript +```javascript document.body.appendChild(app.view); ``` @@ -105,7 +105,7 @@ There are a number of ways to draw images in PixiJS, but the simplest is by usin Before PixiJS can render an image, it needs to be loaded. Just like in any web page, image loading happens asynchronously. We'll talk a lot more about resource loading in later guides. For now, we can use a helper method on the PIXI.Sprite class to handle the image loading for us: -```JavaScript +```javascript // Magically load the PNG asynchronously let sprite = PIXI.Sprite.from('sample.png'); ``` @@ -116,7 +116,7 @@ Before PixiJS can render an image, it needs to be loaded. Just like in any web Finally, we need to add our new sprite to the stage. The stage is simply a [Container](https://pixijs.download/release/docs/PIXI.Container.html) that is the root of the scene graph. Every child of the stage container will be rendered every frame. By adding our sprite to the stage, we tell PixiJS's renderer we want to draw it. -```JavaScript +```javascript app.stage.addChild(sprite); ``` diff --git a/versioned_docs/version-7.3.2/guides/components/containers.md b/versioned_docs/version-7.3.2/guides/components/containers.md index c4bd5de39..9839140c0 100644 --- a/versioned_docs/version-7.3.2/guides/components/containers.md +++ b/versioned_docs/version-7.3.2/guides/components/containers.md @@ -10,7 +10,7 @@ However, it's a good idea _not_ to do this. Standalone Container objects are ** So that's the primary use for Containers - as groups of renderable objects in a hierarchy. -Check out the [container example code](/examples/basic/container). +Check out the [container example code](../../examples/basic/container). ## Masking diff --git a/versioned_docs/version-7.3.2/guides/components/graphics.md b/versioned_docs/version-7.3.2/guides/components/graphics.md index 5c1e0c73b..236e11946 100644 --- a/versioned_docs/version-7.3.2/guides/components/graphics.md +++ b/versioned_docs/version-7.3.2/guides/components/graphics.md @@ -4,7 +4,7 @@ In this guide, we're going to de-mystify the Graphics object, starting with how to think about what it does. -Check out the [graphics example code](/examples/graphics/simple). +Check out the [graphics example code](../../examples/graphics/simple). ## Graphics Is About Building - Not Drawing @@ -83,7 +83,7 @@ Doing so is simple. Create the object, call the various builder functions to ad You can also use a Graphics object as a complex mask. To do so, build your object and primitives as usual. Next create a PIXI.Container object that will contain the masked content, and set its `mask` property to your Graphics object. The children of the container will now be clipped to only show through inside the geometry you've created. This technique works for both WebGL and Canvas-based rendering. -Check out the [masking example code](/examples/graphics/simple). +Check out the [masking example code](../../examples/graphics/simple). ## Caveats and Gotchas diff --git a/versioned_docs/version-7.3.2/guides/components/interaction.md b/versioned_docs/version-7.3.2/guides/components/interaction.md index 3aa113495..7d98df968 100644 --- a/versioned_docs/version-7.3.2/guides/components/interaction.md +++ b/versioned_docs/version-7.3.2/guides/components/interaction.md @@ -59,7 +59,7 @@ PixiJS supports the following event types: Any DisplayObject-derived object (Sprite, Container, etc.) can become interactive simply by setting its `eventMode` property to any of the eventModes listed above. Doing so will cause the object to emit interaction events that can be responded to in order to drive your project's behavior. -Check out the [interaction example code](/examples/events/click). +Check out the [interaction example code](../../examples/events/click). To respond to clicks and taps, bind to the events fired on the object, like so: diff --git a/versioned_docs/version-7.3.2/guides/components/sprites.md b/versioned_docs/version-7.3.2/guides/components/sprites.md index db495b6b3..92ef5bb77 100644 --- a/versioned_docs/version-7.3.2/guides/components/sprites.md +++ b/versioned_docs/version-7.3.2/guides/components/sprites.md @@ -6,7 +6,7 @@ Sprites are the simplest and most common renderable object in PixiJS. They repr To create a Sprite, all you need is a Texture (check out the Texture guide). Load a PNG's URL using the PIXI.Loader class, then call `PIXI.Sprite.from(url)` and you're all set. As a convenience during prototyping, you can pass a non-loaded URL to `from()` and PixiJS will handle it, but your sprite will "pop in" after it loads if you don't pre-load your textures. -Check out the [sprite example code](/examples/sprite/basic). +Check out the [sprite example code](../../examples/sprite/basic). ## Using Sprites diff --git a/versioned_docs/version-7.3.2/guides/components/text.md b/versioned_docs/version-7.3.2/guides/components/text.md index d7a1b53c1..caf4aab69 100644 --- a/versioned_docs/version-7.3.2/guides/components/text.md +++ b/versioned_docs/version-7.3.2/guides/components/text.md @@ -14,7 +14,7 @@ In order to draw text to the screen, you use a [Text](https://pixijs.download/re So when working with PIXI.Text objects, there are two sets of options - standard display object options like position, rotation, etc that work *after* the text is rasterized internally, and text style options that are used *while* rasterizing. Because text once rendered is basically just a sprite, there's no need to review the standard options. Instead, let's focus on how text is styled. -Check out the [text example code](/examples/text/pixi-text). +Check out the [text example code](../../examples/text/pixi-text). ## Text Styles @@ -80,7 +80,7 @@ In addition to the standard PIXI.Text approach to adding text to your project, P The primary advantage of this approach is speed - changing text frequently is much cheaper and rendering each additional piece of text is much faster due to the shared source texture. -Check out the [bitmap text example code](/examples/text/bitmap-text). +Check out the [bitmap text example code](../../examples/text/bitmap-text). ## BitmapFont diff --git a/versioned_docs/version-7.3.2/guides/components/textures.md b/versioned_docs/version-7.3.2/guides/components/textures.md index 492cf2f8c..0dd4e38c9 100644 --- a/versioned_docs/version-7.3.2/guides/components/textures.md +++ b/versioned_docs/version-7.3.2/guides/components/textures.md @@ -72,4 +72,4 @@ RenderTexture: A more advanced (but very powerful!) feature is to build a Textur Each of these texture sources has caveats and nuances that we can't cover in this guide, but they should give you a feeling for the power of PixiJS's texture system. -Check out the [render texture example code](/examples/textures/render-texture-basic). +Check out the [render texture example code](../../examples/textures/render-texture-basic).