Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: add example and guide for three + pixi #145

Open
wants to merge 5 commits into
base: main
Choose a base branch
from

Conversation

GoodBoyDigital
Copy link
Member

@GoodBoyDigital GoodBoyDigital commented Dec 9, 2024

Really trying to get into a habit of creating guides along with new features! So here is a guide for mixing three and pixi in the same context!

dependant on pixijs/pixijs#11142

@Zyie - will leave the dependancy bit with you!

Copy link

@Copilot Copilot AI left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Copilot reviewed 5 out of 6 changed files in this pull request and generated 2 suggestions.

Files not reviewed (1)
  • src/examples/v8.0.0/examplesData.json: Language not supported
Comments skipped due to low confidence (1)

docs/guides/advanced/mixing-three-and-pixi.md:6

  • The word 'Lets' should be 'Let's' in the sentence 'Lets see how to do this.'
Combining the advanced 3D rendering capabilities of Three.js with the speed and versatility of PixiJS for 2D can result in a powerful, seamless experience. Lets see how to do this.

const stage = new Container();

// Create a yellow rounded rectangle UI element
const uiLayer = new Graphics().roundRect(20, 80, 300, 300, 20).fill(0xffff00);
Copy link
Preview

Copilot AI Dec 9, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The method 'roundRect' should be 'drawRoundedRect' in PixiJS.

Suggested change
const uiLayer = new Graphics().roundRect(20, 80, 300, 300, 20).fill(0xffff00);
const uiLayer = new Graphics().drawRoundedRect(20, 80, 300, 300, 20).fill(0xffff00);

Copilot is powered by AI, so mistakes are possible. Review output carefully before use.

Positive Feedback
Negative Feedback

Provide additional feedback

Please help us improve GitHub Copilot by sharing more details about this comment.

Please select one or more of the options
const uiLayer = new Graphics().roundRect(20, 80, 300, 300, 20).fill(0xffff00);

// Add text overlay
const text = new Text({ text: 'Pixi and Three.js', style: { fontFamily: 'Arial', fontSize: 24, fill: 'black' } });
Copy link
Preview

Copilot AI Dec 9, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The 'Text' constructor is called incorrectly. It should be 'new Text('Pixi and Three.js', { fontFamily: 'Arial', fontSize: 24, fill: 'black' })'.

Suggested change
const text = new Text({ text: 'Pixi and Three.js', style: { fontFamily: 'Arial', fontSize: 24, fill: 'black' } });
const text = new Text('Pixi and Three.js', { fontFamily: 'Arial', fontSize: 24, fill: 'black' });

Copilot is powered by AI, so mistakes are possible. Review output carefully before use.

Positive Feedback
Negative Feedback

Provide additional feedback

Please help us improve GitHub Copilot by sharing more details about this comment.

Please select one or more of the options
@Zyie Zyie force-pushed the feat-mixing-renderers branch from 2959b5b to 24a48d0 Compare December 19, 2024 13:05
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants