pixijs / examples Goto Github PK
View Code? Open in Web Editor NEWRendering examples using PixiJS and related plugins
Home Page: https://pixijs.io/examples
Rendering examples using PixiJS and related plugins
Home Page: https://pixijs.io/examples
Complete lineStyle
Is missing the last segment.
https://www.pixiplayground.com/#/edit/Ytz80nX7aREstArPfAkV3
pixi.js
version: v5.0.0-rc.2Hi the text demo here:
http://pixijs.github.io/examples/index.html?s=basics&f=text.js&title=Text
and here
https://github.com/pixijs/examples/blob/gh-pages/examples/basics/text.js
the font option has the incorrect order for the styling:
var style = {
font : '36px Arial bold italic',
should be:
var style = {
font : 'bold italic 36px Arial',
cheers and thanks for your hard work on PIXI.js
This project will need some work upgrading to v7:
There are several plugins that will also require updating.
I was unable to select items from the navigation in Firefox, I assume because of the attached Javascript error.
Works fine in Chrome.
TypeError: e.event.props is undefined[Learn More] examples:3:3027
<anonymous> https://pixijs.io/examples/#/basics/basic.js:3
<anonymous> https://pixijs.io/examples/#/basics/basic.js:3
<anonymous> https://pixijs.io/examples/#/basics/basic.js:3
<anonymous> https://pixijs.io/examples/#/basics/basic.js:3
m6jQuery
As the title. I can't found the old version document on the web. My team is still use version 4.
I found I can't do click event in this demo...
addr:
http://pixijs.github.io/examples/?v=v4.1.0#/demos/interactivity.js
In fact other demo like:
addr:
http://pixijs.github.io/examples/?v=v4.1.0#/basics/click.js
are works bad!!!!
And I have test other version....I found this is only in latest ver..It works fine in v4.0.3
My Device info:
Mac OS 10.11.5 and Mac Chrome v53.0.2785.30 dev (64-bit)
would be great if we could have an example with a zoom based on mouse position for canvas rendering.
I am not sure of the mathematical formula to use with event.
A example could help.
Thank you guys.
const mapZoom = SM_S._spriteset._tilemap.scale; // zoom based on scale the render
function wheel_(event) {//TODO: zoom system
if(event.wheelDeltaY>0){
mapZoom.x+=0.05;
mapZoom.y+=0.05;
$gameMap._displayX+=0.05
dX+=0.05;
}else{
mapZoom.x-=0.05;
mapZoom.y-=0.05;
$gameMap._displayX-=0.05
dX-=0.05;
}
};
When I set backgroundColor: 0x000000, it won't turn black unless it's inside quote '0x000000'.
var renderer = PIXI.autoDetectRenderer(800, 800, {backgroundColor: 0x000000});
At line 62 in /examples/?v=v6.0.4#/demos-basic/cacheAsBitmap.js
there are a comment:
// var sprite = new PIXI.Sprite(alienContainer.generateTexture());
// app.stage.addChild(sprite);
// sprite.x = Math.random() * 800;
// sprite.y = Math.random() * 600;
PIXI.Container.generateTexture - is not a function - example failed on PIXI 6.0.4
how to use dragbones getbone??
` const app = new PIXI.Application({ antialias: true });
document.body.appendChild(app.view);
app.stop();
// load spine data
PIXI.Loader.shared
.add('skeleton', '/moban/dragonbones/Dragon_ske.json')
.add('texture_json', '/moban/dragonbones/Dragon_tex.json')
.add('texture_png', '/moban/dragonbones/Dragon_tex.png')
.load(onAssetsLoaded);
function onAssetsLoaded(loader, res) {
const factory = dragonBones.PixiFactory.factory;
factory.parseDragonBonesData(res.skeleton.data);
factory.parseTextureAtlasData(res.texture_json.data, res.texture_png.texture);
var armature = factory.buildArmature("Dragon");
// var armatureDisplay = armature.getDisplay();
var armatureDisplay = factory.buildArmatureDisplay('Dragon', 'Dragon');
// armatureDisplay.animation.play('walk');
armatureDisplay.x = 400.0;
armatureDisplay.y = 400.0;
armatureDisplay.scale.x = 0.6;
armatureDisplay.scale.y = 0.6;
//调整动画速度
// armatureDisplay.animation.timeScale = 0.1;
//控制骨骼旋转
var head =armature.getBone("head");
head.offset.rotation = 0.6;
head.invalidUpdate();
app.stage.addChild(armatureDisplay);
// setTimeout(function() {
// armatureDisplay.animation.play('stand');
// setTimeout(function() {
// armatureDisplay.animation.play('walk');
// }, 2000)
// }, 2000)
app.start();
}`
this is no effect
Maggots are so terrible 😭😭😭😭😭
I need transparent sprites that will be placed on canvas to trigger specific events when clicked. This way they dont override the background image of the canvas.
@englercj Can you tell me where pixi.js is referenced from html, so I can add pixi-spine there too?
Error: "Failed to execute 'texImage2D' on 'WebGL2RenderingContext': The image element contains cross-origin data, and may not be loaded.".
If I understand right, couse of error is CORS. But how to fix it?
I read on the main page that all pixi content is accessible. From a brief look through the accessibility code here on GitHub, it seems content should become accessible (i.e. generate matching HTML) on pressing TAB. However, when I press tab on the examples page https://pixijs.io/examples/#/demos-basic/container.js, nothing happens.
hi, i want draw a dynamic arrow with bezier curve, but i can find demo on how draw a arrow with graphics.
how i can perform this?
it for use in this kind of context, but i can't perform this in photoshop, too complex to do.
it possible to add a bezier arrow in pixi demo to help understand?
Or if someone have a code to share ?
https://www.pixiplayground.com/#/edit/cohufb~Y8gCB8VPlmql8f
thanks in advance.
I'm using pixi v4.8.5 in my project and when I started to test it in one old notebook I noticed a bug in PIXI.mesh.Rope
. Went to the official pixi examples to see how it would behave and realized the bug also happens there.
pixi.js
version: 4.8.5The same thing happens in v5 with the latest pixi version (using PIXI.SimpleRope
).
The bug is also present when running on Opera (Version 67.0.3575.137).
It doesn't happen in Firefox (75.0).
If I use the flag forceCanves: true
it works as expected, but the performance is not good.
The flag legacy: true
doesn't fix it.
I decided to check my chrome on webglreport.com:
Firefox receives the green OK message for webgl1 and webgl2. Opera and chrome have the same results.
System says the driver is up to date.
I also have ubuntu 16.04 running on the same PC and the bug doesn't happen there (tested latest chrome and firefox).
Is there any workaround?
pixi-tilemap : https://github.com/pixijs/pixi-tilemap
In example basic.js
, there is the code:
// Listen for animate update
app.ticker.add(function(delta) {
// just for fun, let's rotate mr rabbit a little
// delta is 1 if running at 100% performance
// creates frame-independent tranformation
bunny.rotation += 0.1 / delta;
});
Instead, it should be:
// Listen for animate update
app.ticker.add(function(delta) {
// just for fun, let's rotate mr rabbit a little
// delta is 1 if running at 100% performance
// creates frame-independent tranformation
bunny.rotation += 0.1 * delta;
});
Delta is greater if there is a greater time difference between steps. To ensure the same speed of rotation at any performance, there should be multiplication.
I read on the main page that all pixi content is accessible. From a brief look through the accessibility code here on GitHub, it seems content should become accessible (i.e. generate matching HTML) on pressing TAB. However, when I press tab on the examples page https://pixijs.io/examples/#/interaction/interactivity.js, nothing happens.
Hey there, I was just wondering if the characters in this repo could be used commercially in other websites? I've noticed the package json file mentions MIT license, I'm just not sure if that applies to all the assets in the repo as well?
If they so happen to not be allowed to be used commercially, does anyone know a marketplace where I could by assets to use with this framework? (I'm specially interested in characters that could be used with the spine framework)
Thanks 😊
Subj. Because we use iframe, spector doesnt detect the canvas. Maybe there's a way to fight that.
Hi,
Right now there are two copies of pixi-spine,js, one is under _site/js/plugings, the other is under _site/js.
However, the editor will use the one under _site/js/plugins.
Regarding 34f72fe
to make returning to the rest of the website possible
https://github.com/pixijs/examples/blob/gh-pages/index.html#L18
Having upgrade examples to work with v7, there are bunch of improvements that could make this examples project much better.
?embed=1&lite=1
)This is the console error:
ERROR: 0:116: '26' : memory exhausted
pixi.js:6453 WebGL: INVALID_VALUE: attachShader: no object or object deleted
pixi.js:6459 Pixi.js Error: Could not initialize shader.24.compileProgram @ pixi.js:6459
19.Shader @ pixi.js:5769
generateMultiTextureShader @ pixi.js:17743
88.SpriteRenderer.onContextChange @ pixi.js:17470
emit @ pixi.js:1238
...
window.onload @ VM294:1
The example shown on the documentation site here throws an error when I try to view it:
http://pixijs.github.io/examples/#/spine/spineboy.js
Error in console:
Uncaught Error: Cannot add resources while the loader is running.
at Loader.add (pixi.js:5190)
at Loader. (pixi-spine.js:5457)
at pixi.js:5432
at next (pixi.js:6616)
at Loader.bitmapFontParser (pixi.js:32776)
at pixi.js:5432
at next (pixi.js:6616)
at Loader.spritesheetParser (pixi.js:33098)
at pixi.js:5432
at next (pixi.js:6616)
It looks like all the spine examples have this issue since none are working for me.
On Chrome Version 55.0.2883.87 m
I cloned examples repo git clone https://github.com/pixijs/examples
and built it with npm run build
. I want to be able to debug examples in Chrome. I mean set breakpoint in PIXI.Application, etc. With http-server -c-1
I do not see such an option. Running build seemed to be bundled and minified (pixi-examples.min.js
). Is there such an option to debug examples? Or maybe should I request it?
#24 just nuked examples for all version prior to 4.3.3
In the plugin-projection 3D cards example, the 'Tap on cards' text does not display.
I followed the instructions and get an error:
[01:15:29] Using gulpfile ~/github/examples/gulpfile.js
[01:15:29] Starting 'build'...
[01:15:29] Starting 'clean'...
[01:15:29] Starting 'serve'...
[01:15:29] Finished 'serve' after 42 ms
[01:15:29] Server started http://localhost:9000
[01:15:29] LiveReload started on port 35729
[01:15:29] Finished 'clean' after 67 ms
[01:15:29] Starting 'assets'...
[01:15:29] Starting 'html:index'...
[01:15:29] Starting 'styles:common'...
[01:15:29] Starting 'jshint'...
/Users/me/github/examples/node_modules/gulp-less/index.js:68
}).done(undefined, cb);
^
For example:
https://pixijs.io/examples/#/basics/basic.js
Users can edit the code and change the visible result. Ok try to do something with code. It becomes a hell because cursor intermix with background - they have similar colors.
There's something wrong with Masking demo.
Maybe it's intentional but I don't think so. It used to look like this:
And now it's like:
After bit of digging looks like this code was shorted before:
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.lineTo(-120 + Math.sin(count) * 20, -100 + Math.cos(count)* 20);
thing.rotation = count * 0.1;
So I'm guessing something went wrong while moving examples around.
If somehow it's how it's suppose to look like, just close this issue.
I see an html file index.html at / but not in the subdirectory you point out.
required/examples/basics/basic.html
this exists mind you:
required/examples/basics/basic.js
After reloading the code, all previous tickers are still alive. That's the source of memory and performance leak.
mesh examples are not working, black canvas
Hi I am new using this framework.
I see this example and I would like to know which editor they use to generate the json with the animation. This is just a doubt. Your answer will very help
I can't open it , can fix it ?
Hi guys, i found the trouble.
Maybe you know about that.
But anyway, in example on this LINK
Video show only in 4.0.0 version.
In version 4.0.1 and above video doesn't work, only music.
I checked in Google Chrome 53.0.2785.143 and Firefox 43.0.2
https://pixijs.io/examples/#/graphics/simple.js
I'm new to pixi.js, but I expect this function was deprecated/renamed at some point?
In the readme you write how to create your own examples:
All you need to do is copy and paste this file to where you think your example belongs.
You can then come back to the browser and navigate to your file and start changing it.
Actually you need to explain a bit more. After creating an example you need to add it to the manifest.json in the root folder of the examples. This was working for me.
I thought these examples are for v3
which license are code examples and assets shared under?
when using npm run build it is showing this
F:\pixi-test\examples\examples\js\plugin-picture\mask-blur.js
9:22 error Strings must use singlequote quotes
11:16 error Strings must use singlequote quotes
11:37 error Strings must use singlequote quotes
18:5 error Expected exception block, space or tab after '//' in comment spaced-comment
43:23 error There should be no line break before or after '=' operator-linebreak
44:9 error Strings must use singlequote quotes
44:47 error '+' should be placed at the beginning of the line operator-linebreak
45:9 error Strings must use singlequote quotes
45:59 error '+' should be placed at the beginning of the line operator-linebreak
46:9 error Strings must use singlequote quotes
59:30 error Strings must use singlequote quotes
59:54 error Missing trailing comma comma-dangle
F:\pixi-test\examples\examples\js\text\text.js
25:22 error Missing trailing comma comma-dangle
40:22 error Strings must use singlequote quotes
45:17 error Strings must use singlequote quotes
46:15 error Strings must use singlequote quotes
47:24 error Missing trailing comma comma-dangle
51:23 error A space is required after ',' comma-spacing
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.