Research
Security News
Malicious npm Package Typosquats react-login-page to Deploy Keylogger
Socket researchers unpack a typosquatting package with malicious code that logs keystrokes and exfiltrates sensitive data to a remote server.
@pixi/display
Advanced tools
Package description
@pixi/display is a part of the PixiJS library, which is a fast 2D rendering engine for creating interactive graphics and animations. The @pixi/display package specifically handles the display hierarchy, allowing you to manage and render display objects such as sprites, containers, and graphics.
Creating a Container
A Container is a basic building block in PixiJS that can hold and manage multiple display objects. This code creates a new Container and adds it to the stage.
const app = new PIXI.Application();
document.body.appendChild(app.view);
const container = new PIXI.Container();
app.stage.addChild(container);
Adding a Sprite to a Container
Sprites are basic display objects that can be rendered. This code creates a Sprite from a texture and adds it to the previously created Container.
const texture = PIXI.Texture.from('path/to/image.png');
const sprite = new PIXI.Sprite(texture);
container.addChild(sprite);
Handling Interactivity
PixiJS allows you to make display objects interactive. This code makes a Sprite interactive and sets up an event listener for pointerdown events.
sprite.interactive = true;
sprite.buttonMode = true;
sprite.on('pointerdown', () => {
console.log('Sprite clicked!');
});
Animating Display Objects
PixiJS provides a ticker that can be used to update and animate display objects. This code rotates a Sprite continuously.
app.ticker.add((delta) => {
sprite.rotation += 0.01 * delta;
});
Three.js is a popular 3D library that also supports 2D rendering. It provides a more comprehensive set of features for 3D graphics but can be more complex to use for simple 2D tasks compared to @pixi/display.
Phaser is a fast, robust, and mature 2D game framework. It offers a wide range of features for game development, including physics, input handling, and asset management. While it is more feature-rich, it can be overkill for simple 2D rendering tasks.
Konva is a 2D canvas library for creating complex graphics on the web. It is similar to @pixi/display in terms of functionality but focuses more on providing a declarative API for creating and managing shapes and animations.
Readme
npm install @pixi/display
import * as application from '@pixi/display';
FAQs
Unknown package
We found that @pixi/display demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 2 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Research
Security News
Socket researchers unpack a typosquatting package with malicious code that logs keystrokes and exfiltrates sensitive data to a remote server.
Security News
The JavaScript community has launched the e18e initiative to improve ecosystem performance by cleaning up dependency trees, speeding up critical parts of the ecosystem, and documenting lighter alternatives to established tools.
Product
Socket now supports four distinct alert actions instead of the previous two, and alert triaging allows users to override the actions taken for all individual alerts.