So I have one spritesheet for my player. The spritesheet contains the base outfit, a hat (with no outfit just the hat) and a sword (just the sword). So what I want is stack all of them to have a outfit + hat + sword or maybe just outfit + sword, etc.. But what I have now is just the animations for the base outfit that works ok they are:
createAnimations() {
/**
* Outfit animatioons unmount
*/
this.anims.create({
key: 'up',
frames: this.anims.generateFrameNumbers('male_pirate', {
frames: [0, 48, 92, 130, 168, 205,232, 258, 278]
}),
frameRate: 10,
repeat: -1
});
this.anims.create({
key: 'right',
frames: this.anims.generateFrameNumbers('male_pirate', {
frames: [2, 50, 94, 132, 170, 207, 234, 260, 280]
}),
frameRate: 10,
repeat: -1
});
this.anims.create({
key: 'down',
frames: this.anims.generateFrameNumbers('male_pirate', {
frames: [4, 52, 96, 134, 172, 209, 236, 262, 282]
}),
frameRate: 10,
repeat: -1
});
this.anims.create({
key: 'left',
frames: this.anims.generateFrameNumbers('male_pirate', {
frames: [6, 54, 98, 136, 174, 211, 238, 264, 284]
}),
frameRate: 10,
repeat: -1
});
/**
* Addon 1 animations.
*/
}
I import the spritesheet like:
this.load.spritesheet('male_pirate', 'assets/outfits/descarga64.png', {
frameWidth: 64,
frameHeight: 64
});
and I create the player:
this.player = this.add.sprite(0, 0, 'male_pirate', 0);
this.container = this.add.container(playerInfo.x, playerInfo.y);
this.container.setSize(32, 32);
this.physics.world.enable(this.container);
this.container.add(this.player);
Is it possible to create multiples sprites with the same spritesheet and use diferent frames for each sprite when animating?
Because when I do
this.anims.create({
key: 'up',
frames: this.anims.generateFrameNumbers('male_pirate', {
frames: [0, 48, 92, 130, 168, 205,232, 258, 278]
}),
frameRate: 10,
repeat: -1
});
I'm animating the spritesheet "male_pirate" with the frames [0, 48, 92, 130, 168, 205,232, 258, 278].
But what I want is when the key up is pressed animate the "sprite player" with the frames [0, 48, 92, 130, 168, 205,232, 258, 278] and the "sprite sword" with the frames [12, 60, 500, ...] and the "sprite hat" with the frames [15,28,..]
I could do it by using different spritesheets for the outfit, and the sword but I would like to avoid the work of re-organize the spritesheets
In general if you want dynamic "sprites" / GameObjects I would recommend to do it with Spine (look at this offical example, or checkout this youtube video for some "basic" infos about spine/bones).
But If you have the images already, and want a quick solution. I say generate the new sprites in game, since animating multiple sprites one ontop of the other could cause animation sync problems.
Checkout this post on the phaser discourse, it explains how you can paint multiple images in phaser together an create like this a "new Sprite", but still using the same animation.
(At the bottom of the thread there is even a small codepen showing some working code)
If animation glitches are okay for you game, you simply create animations for each sprite/outfit combination, adn just play them one ontop of the other, depending of the current outfit
Related
I'm a beginner in p5.js, this is my code till now:
function setup() {
createCanvas(600, 600);
}
function draw() {
background(50, 168, 82);
road();
house();
}
function road() {
fill(54, 59, 55);
noStroke();
rect(200, 0, 220, 600);
fill(197, 222, 202);
rect(300, 50, 40, 70);
fill(197, 222, 202);
rect(300, 200, 40, 70);
fill(197, 222, 202);
rect(300, 350, 40, 70);
fill(197, 222, 202);
rect(300, 500, 40, 70);
}
function house() {
fill(209, 207, 61);
rect(50, 50, 100, 100);
}
<script src="https://cdn.jsdelivr.net/npm/p5#1.3.1/lib/p5.js"></script>
And this is the result:
code result
Instead of that yellow rectangle, I wanted a top-view house that looks like a house ;)
I tried, but I couldn't get a house. I'd be happy if someone could do that for me.
If you don't understand what top-view house means, you can see this image:
The house can be the shape of any of these houses.
If you want just a simple house, you can make two halves of the square different colors (to show the light hitting the two sides of the roof differently):
function setup() {
createCanvas(400, 400);
background(0);
noStroke();
fill(125);
rect(100, 100, 200, 100);
fill(200);
rect(100, 200, 200, 100);
}
If you want it to be less simple, you'll need to at least use triangle(), probably also quad(). For both of these commands, you specify the x and y coordinates of each point in the shape. Here's an example of a slightly more complicated house:
function setup() {
createCanvas(400, 400);
background(0);
noStroke();
fill(100);
quad(50, 100,
350, 100,
300, 200,
100, 200
);
fill(200);
quad(100, 200,
300, 200,
350, 300,
50, 300
);
fill(125);
triangle(50, 100,
125, 200,
50, 300
);
triangle(350, 100,
275, 200,
350, 300
);
}
Here is versions:
node v12.9.1,
npm 6.10.2,
ffmpeg.js#4.2.9003
repo: https://github.com/Kagami/ffmpeg.js
decode.js code like this:
const fs = require('fs');
const ffmpeg = require('ffmpeg.js');
const testData = new Uint8Array(fs.readFileSync("test/test.webm"));
const result = ffmpeg({
MEMFS: [{ name: "test.webm", data: testData }],
arguments: ["-i", "test.webm", "-hide_banner", "%04d.jpg" ],
});
node decode.js then I got errors:
[vp8 # 0x6a9850] Warning: not compiled with thread support, using thread emulation
[vorbis # 0x6ac650] Warning: not compiled with thread support, using thread emulation
Input #0, matroska,webm, from 'test.webm':
Metadata:
encoder : Lavf56.40.100
Duration: 00:00:03.95, start: 0.000000, bitrate: 798 kb/s
Stream #0:0: Video: vp8, yuv420p, 854x480, SAR 1:1 DAR 427:240, 24 fps, 24 tbr, 1k tbn, 1k tbc (default)
Stream #0:1: Audio: vorbis, 48000 Hz, stereo, fltp (default)
Stream #0:2(eng): Subtitle: webvtt
[NULL # 0x6ae530] Unable to find a suitable output format for '%04d.jpg'
%04d.jpg: Invalid argument
This is because of the use npm install ffmpeg.js .
It does not contain image2muxer and mjpeg encoder .
So I build with docker and modify makefile:
WEBM_MUXERS = webm ogg null image2
WEBM_ENCODERS = libvpx_vp8 libopus png mjpeg
then make and get the ffmpeg-webm.js
Test code:
const fs = require('fs');
const ffmpeg = require('./ffmpeg-webm.js');
const testData = new Uint8Array(fs.readFileSync("test/test.webm"));
const result = ffmpeg({
MEMFS: [{ name: "test.webm", data: testData }],
arguments: ["-i", "test.webm", "-hide_banner", "%04d.jpg" ],
});
const out = result.MEMFS[0];
console.log(out);
and get:
{
name: '0001.jpg',
data: Uint8Array [
137, 80, 78, 71, 13, 10, 26, 10, 0, 0, 0, 13,
73, 72, 68, 82, 0, 0, 3, 86, 0, 0, 1, 224,
8, 2, 0, 0, 0, 41, 50, 107, 125, 0, 0, 0,
9, 112, 72, 89, 115, 0, 0, 0, 1, 0, 0, 0,
1, 0, 79, 37, 196, 214, 0, 0, 16, 0, 73, 68,
65, 84, 120, 156, 220, 221, 247, 111, 91, 249, 153, 47,
254, 221, 205, 100, 48, 30, 219, 80, 133, 58, 84, 161,
10, 177, 129, 21, 172, 96, 5, 69, 73, 80, 133, 228,
2, 87, 184, 72,
... 524188 more items
]
}
It works!
Hope it helps you ~
I'm facing an issue where the hover label of multiple traces overlaps with the x-axis's hover label when all the trace values are close to 0.
In the example below, you can see the overlap when you mouseover x=1000
const data = []
const x = [100, 200, 300, 400, 500, 600, 700, 800, 900, 1000];
data.push({
x: x,
y: [100, 105, 132, 150, 130, 103, 2, 200, 301, 1],
});
data.push({
x: x,
y: [200, 205, 232, 250, 230, 193, 1, 100, 201, 0],
})
data.push({
x: x,
y: [0, 205, 232, 250, 230, 193, 10, 100, 0, 0],
})
const layout = {
height: 350,
xaxis: {
// tickformat: ',.2r',
},
hoverlabel: {
font: {
family: 'Helvetica Neue',
size: 11,
}
}
}
Plotly.plot('graph', data, layout);
<head>
<!-- Plotly.js -->
<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
</head>
<body>
<div id="graph"></div>
</body>
https://codepen.io/anon/pen/RBpQPg
Any workarounds would be appreciated. For example, would it be possible to combine all the hover labels into 1 label somehow?
I am currently trying to have a fixed range for categorical box plots in plotly.js, in order to always have the same graph size and layout even if some traces have no data.
If you look at this CodePen based on a example of the docs, the "David West" trace still appears because it's in the middle, but the "Demar Derozan" on the right is not seen, because it's at the end, and the graph size is computed with the data extremas.
Is it possible in plotly.js to have a fixed categorical axis for box plots?
HTML:
<head>
<!-- Plotly.js -->
<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
</head>
<body>
<!-- Plotly chart will be drawn inside this DIV -->
<div id="myDiv"></div>
<script>
/* JAVASCRIPT CODE GOES HERE */
</script>
</body>
Javascript:
var xData = ['Carmelo<br>Anthony', 'Dwyane<br>Wade',
'Deron<br>Williams', 'Brook<br>Lopez',
'Damian<br>Lillard', 'David<br>West',
'Blake<br>Griffin', 'David<br>Lee',
'Demar<br>Derozan'];
function getrandom(num , mul)
{
var value = [ ]
for(i=0;i<=num;i++)
{
rand=Math.random() * mul;
value.push(rand);
}
return value
}
var yData = [
getrandom(30 ,10),
getrandom(30, 20),
getrandom(30, 25),
getrandom(30, 40),
getrandom(30, 45),
getrandom(30, NaN),
getrandom(30, 20),
getrandom(30, 15),
getrandom(30, NaN)
];
var colors = ['rgba(93, 164, 214, 0.5)', 'rgba(255, 144, 14, 0.5)', 'rgba(44, 160, 101, 0.5)', 'rgba(255, 65, 54, 0.5)', 'rgba(207, 114, 255, 0.5)', 'rgba(127, 96, 0, 0.5)', 'rgba(255, 140, 184, 0.5)', 'rgba(79, 90, 117, 0.5)', 'rgba(222, 223, 0, 0.5)'];
var data = [];
for ( var i = 0; i < xData.length; i ++ ) {
var result = {
type: 'box',
y: yData[i],
name: xData[i],
boxpoints: 'all',
jitter: 0.5,
whiskerwidth: 0.2,
fillcolor: 'cls',
marker: {
size: 2
},
line: {
width: 1
}
};
data.push(result);
};
layout = {
title: 'Points Scored by the Top 9 Scoring NBA Players in 2012',
yaxis: {
autorange: true,
showgrid: true,
zeroline: true,
dtick: 5,
gridcolor: 'rgb(255, 255, 255)',
gridwidth: 1,
zerolinecolor: 'rgb(255, 255, 255)',
zerolinewidth: 2
},
margin: {
l: 40,
r: 30,
b: 80,
t: 100
},
paper_bgcolor: 'rgb(243, 243, 243)',
plot_bgcolor: 'rgb(243, 243, 243)',
showlegend: false
};
Plotly.newPlot('myDiv', data, layout);
you could add a fixed range to your xaxis in the layout-object.
xaxis:{range: [-1,9]}
To have a more dynamic way you can use the amount of different data, so its dynamic if you have less data (e.g. Top 3 instead Top 9):
xaxis:{range: [-1,data.length]}
I added it to your codepen: http://codepen.io/anon/pen/MbppBN
Hope it helps:-)
Is there any solution to make border-color for bar chart in g.raphael ?
Here is my script
efficiency.barchart(0, 200, 400, 150, [
[10, 5, 32, 13, 2, 55, 8]
], {
vgutter: 0,
colors: ["#F58A2A"],
"gutter": "0%"
});
Simply needed black border for left, top and right
Like this
http://jsfiddle.net/sweetmaanu/u4qzB/4/
Apply attributes to the bars directly within barchart:
efficiency.barchart(0, 0, 400, 150, [
[55, 20, 13, 32, 5, 1, 10]
], {
type: 'soft',
//vgutter: 5,
stretch: true,
colors: ["#F00"],
}).bars.attr({
stroke: "#000",
"stroke-width":1
});
It seems there is no option to use border in the barchart, you can see it on the documentation:
http://g.raphaeljs.com/reference.html#Paper.barchart
If you really want to force borders in all the cases, i would recommend you to modify some lines in the js files. (g.raphael.js and g.bar.js)
Look for the text stroke and instead of none, add something. (not sure how stroke works but you can see it on the SVG documetnation.)