Using multiple animations for phaser 3 matter body - phaser-framework

How can I give a phaser 3 matter body an animation? Ideally I would like to switch between several animations.
So far I have only managed to give it a static image:
function preload ()
{
this.load.image('human', 'assets/sprites/x2kship.png');
}
function create ()
{
human = this.matter.add.sprite(300, 400, 'human');
}
I do have prepared files from an old project: atlas.png, atlas.json, animations.json. And it loads successfully:
this.load.atlas('sheet', 'data/atlas.png', 'data/atlas.json');
An example from the animations.json:
{
"animations": [
{
"name": "human-walk",
"frames": [
"human1.png",
"human2.png",
"human3.png",
"human4.png"
],
"frameRate": 100
},
...
The referenced files "human1.png" etc are found in the atlas.json:
"human1.png": {
"frame": { "x": 1137,"y": 1030, "w": 182, "h": 195 },
"rotated": false,
"trimmed": false,
"spriteSourceSize": { "x": 0,"y": 0, "w": 182, "h": 195 },
"sourceSize": { "w": 182, "h": 195 },
"pivot": { "x": 0.5, "y": 0.5 }
},
How can i stich these parts together to make the human do something like human.animations.play('human-walk')? And then maybe human.animations.play('human-stand-still')?

Tweeking the animations format I got it to work like this:
function preload ()
{
this.load.image('human', 'assets/sprites/x2kship.png');
this.load.atlas('sheet', 'data/atlas.png', 'data/atlas.json');
}
function create ()
{
var humanWalk = {
key: 'human-walk',
frames: [
{key: "sheet", frame: "human1.png"},
{key: "sheet", frame: "human2.png"},
{key: "sheet", frame: "human3.png"},
{key: "sheet", frame: "human4.png"},
],
frameRate: 6,
repeat: -1
};
this.anims.create(humanWalk);
human = this.matter.add.sprite(100, 100, 'human');
human.anims.load('human-walk');
human.anims.play('human-walk');
}

Related

I have a list of Dictionaries each dictionary got a value assigned to a key and I need to grab this value according to other 2 values

This is the list{'id': 142840, 'posters': [{'aspect_ratio': 0.703125, 'file_path': '/4EFI8IdI7LOm9Q0BTT2FAdPwdeq.jpg', 'height': 2048, 'iso_639_1': 'en', 'vote_average': 5.312, 'vote_count': 1, 'width': 1440}, {'aspect_ratio': 0.70703125, 'file_path': '/2Lgb7oPgqVpJmruRoH7Rs2yJH0n.jpg', 'height': 2048, 'iso_639_1': 'en', 'vote_average': 5.172, 'vote_count': 1, 'width': 1448}, {'aspect_ratio': 0.7068881289692233, 'file_path': '/6mLaG60xEQm6mw0Ga8TDFZsk0R1.jpg', 'height': 2047, 'iso_639_1': None, 'vote_average': 0.0, 'vote_count': 0, 'width': 1447}]}
I am trying to pick the value of file_path if height>width
It often helps to format a complex data structure to better see how the pieces relate. In this case it shows that the information you care about (height, width, and file_path) can all be found in the dictionaries inside the posters list which is inside a dict we can call poster_dict. With that information we can construct a list of file_paths that meet the specified height and width relationship.
Example:
poster_dict = {
"id": 142840,
"posters": [
{
"aspect_ratio": 0.703125,
"file_path": "/4EFI8IdI7LOm9Q0BTT2FAdPwdeq.jpg",
"height": 2048,
"iso_639_1": "en",
"vote_average": 5.312,
"vote_count": 1,
"width": 1440,
},
{
"aspect_ratio": 0.70703125,
"file_path": "/2Lgb7oPgqVpJmruRoH7Rs2yJH0n.jpg",
"height": 2048,
"iso_639_1": "en",
"vote_average": 5.172,
"vote_count": 1,
"width": 1448,
},
{
"aspect_ratio": 0.7068881289692233,
"file_path": "/6mLaG60xEQm6mw0Ga8TDFZsk0R1.jpg",
"height": 2047,
"iso_639_1": None,
"vote_average": 0.0,
"vote_count": 0,
"width": 1447,
},
],
}
file_path_list = [
one_poster["file_path"]
for one_poster in poster_dict["posters"]
if one_poster["height"] > one_poster["width"]
]
print(file_path_list)
Output:
['/4EFI8IdI7LOm9Q0BTT2FAdPwdeq.jpg', '/2Lgb7oPgqVpJmruRoH7Rs2yJH0n.jpg', '/6mLaG60xEQm6mw0Ga8TDFZsk0R1.jpg']
As the height and width are only in the last dictionary, you can write the code as shown below :
if d['posters'][2]['height'] > d['posters'][2]['width'] :
return d['posters'][2]['file_path']
In case 'height' and 'width' are not in last dictionary, change the value of '[2]'
Hope it's helpful for you. ;-)

How do I fold by "{" in Sublime Text 3 if I have an array of JSON objects?

If I have the following array of JSON objects in Sublime, it will collapse at any "[". My ask is if this can be changed to fold at any "{"
Taking this JSON array
[{"a":[{"b":1,"c":2},{"d":3},{"x":99,"y":100}],"b":4},{"a":[{"b":5,"c":6}],"b":7}]
and pretty formatting it within the same file
[
{
"a": [
{
"b": 1,
"c": 2
},
{
"d": 3
},
{
"x": 99,
"y": 100
}
],
"b": 4
},
{
"a": [
{
"b": 5,
"c": 6
}
],
"b": 7
}
]
As an example of it working mostly the way I am looking for, with the JSON below, it will collapse at any "{" with more than one element, so {"d":3} does not collapse:
{
"a": [
{
"b": 1,
"c": 2
},
{
"d": 3
},
{
"x": 99,
"y": 100
}
],
"b": 4
}
Edit - it looks like if I take the formatted array into a new file, it will recognize all potential folding points.

Azure Cognitive Services - Face API Response: Reserved Fields or Bugs?

In the Azure Cognitive Services Face API (see e.g. https://azure.microsoft.com/en-us/services/cognitive-services/face), the following response fields never seem to trigger:
headPose:pitch (reserved field)
foreheadOccluded
eyeOccluded
Am I misusing these, or is there a plan for them, or is there no plan to activate them?
If you look at the API documentation here:
For the headPose, it says:
EDIT 13/06/2019: doc was saying
HeadPose's pitch value is a reserved field and will always return 0
Now changed to:
headPose: 3-D roll/yaw/pitch angles for face direction.
For the foreheadOccluded value, I successfully got true value in the following test, where there is a cap on the head (sorry for the sample, did not find anything else quickly!):
URL: https://westeurope.api.cognitive.microsoft.com/face/v1.0/detect?returnFaceId=true&returnFaceLandmarks=false&returnFaceAttributes=occlusion
Content sent: { "url": "https://www.knijff.com/markmatters/wp-content/uploads/2015/10/Trump-Red-Hat.jpg" }
Reply received:
[{
"faceId": "e6ae42a6-b008-4859-9bf5-1ae22e4b71a7",
"faceRectangle": {
"top": 118,
"left": 212,
"width": 276,
"height": 276
},
"faceAttributes": {
"occlusion": {
"foreheadOccluded": true,
"eyeOccluded": false,
"mouthOccluded": false
}
}
}]
For the eyeOccluded value, I successfully got true and false values in the following test where the same person appears 2 times, one with a rectangle over the eyes:
URL: https://westeurope.api.cognitive.microsoft.com/face/v1.0/detect?returnFaceId=true&returnFaceLandmarks=false&returnFaceAttributes=occlusion
Content sent: { "url": "https://jov.arvojournals.org/data/Journals/JOV/933685/i1534-7362-14-13-14-f09.png" }
Reply received (please note that 1st face is the right one):
[{
"faceId": "4c2eb52e-2fd4-456c-bdae-694df1adc571",
"faceRectangle": {
"top": 204,
"left": 683,
"width": 297,
"height": 297
},
"faceAttributes": {
"occlusion": {
"foreheadOccluded": false,
"eyeOccluded": false,
"mouthOccluded": true
}
}
}, {
"faceId": "5b9dc938-e6cf-4fe9-8e6c-8649fef44e7a",
"faceRectangle": {
"top": 213,
"left": 107,
"width": 275,
"height": 275
},
"faceAttributes": {
"occlusion": {
"foreheadOccluded": false,
"eyeOccluded": true,
"mouthOccluded": false
}
}
}]

Chart JS change pointBackgroundColor based on data value

So I have created a basic line chart using Chartjs. How would I go about changing the color of the points (pointBackgroundColor) depending on the value of the data? For example, if the data point is less than 10 it changes to red, or if the data point is between 10 and 20 it changes to blue?
const CHART = document.getElementById("lineChart");
let lineChart = new Chart(CHART, {
type: 'line',
data: {
labels: ["5/10/2010", "5/11/2010", "5/12/2010", "5/13/2010", "5/14/2010", "5/15/2010", "5/16/2010"],
datasets: [
{
label: "Theta",
fill: false,
lineTension: 0,
backgroundColor: "rgba(75,192,192,0.4)",
borderColor: "rgba(9,31,62)",
borderCapStyle: 'butt',
borderDash: [],
borderDashOffset: 0.0,
borderJoinStyle: 'miter',
pointBorderColor: "rgba(0,191,255)",
pointBackgroundColor: "rgba(0,191,255)",
pointBorderWidth: 5,
pointBorderRadius: 5,
pointHoverBackgroundColor: "rgba(75,192,192,1)",
pointHoverBorderColor: "rgba(220,220,220,1)",
pointHoverBorderWidth: 2,
pointRadius: 1,
pointHitRadius: 10,
data: [15, 28, 11, 3, 34, 65, 20],
}
]
},
options: {
maintainAspectRatio: false,
responsive: true,
legend: {
display: false,
},
scales: {
yAxes:[{
ticks: {
fontColor: "#091F3e",
beginAtZero: true,
steps: 10,
stepSize: 10,
max: 100
},
gridLines: {
display: false
}
}],
xAxes:[{
ticks: {
fontColor: "#091F3e",
fontSize: "10",
},
gridLines: {
display: false
}
}]
}
}
});
You can use a closure on any option and manipulate the returned value according to the context. In the example bellow I'm the pointBackgroundColor is red when the current value is greater then 0 and blue otherwise.
pointBackgroundColor: function (context) {
let value = context.dataset.data[context.dataIndex];
return value > 0
? 'red'
: 'blue';
},
Here is another thing that may help you Change bar color depending on value.
Its original answer from Tot Zam
Adding the code sample in case the link doesn't work.
var colorChangeValue = 50; //set this to whatever is the decidingcolor change value
var dataset = myChart.data.datasets[0];
for (var i = 0; i < dataset.data.length; i++) {
if (dataset.data[i] > colorChangeValue) {
dataset.backgroundColor[i] = chartColors.red;
}
}
myChart.update();
Its about bars background, but you can try work around and find same solution.

Change font for particular text via script in Photoshop

Looking for a script or action for changing font face for a particular word or text in a paragraph.
I have multiple .psd files (80+) where I need to change font for a specific text say "Hello" from Arial to Tahoma and also make it bold.
Really appreciate a help!
You could try "jam" framework. There is class for manipulating with text. http://www.tonton-pixel.com/JSON%20Action%20Manager/jsDoc/symbols/jamText.html
You are looking for textStyleRange.
var text = "Bonjour !";
var layerText =
{
"layerText":
{
"textKey": text,
"textClickPoint": { "horizontal": 50, "vertical": 95 },
"antiAlias": "antiAliasCrisp",
"textShape":
[
{ "textType": "point", "orientation": "horizontal" }
],
"textStyleRange":
[
{
"from": 0,
"to": text.length,
"textStyle":
{
"fontPostScriptName": "Myriad-Italic",
"size": 288,
"color": { "red": 144, "green": 0, "blue": 255 }
}
}
],
"paragraphStyleRange":
[
{
"from": 0,
"to": text.length,
"paragraphStyle": { "alignment": "center" }
}
]
},
"typeUnit": "pixelsUnit"
};
jamText.setLayerText (layerText);
You need:
- create loop which checks all layers
- read one text layer
- find on which character index substring starts, where is end
- apply jamText.setLayerText
- read next layer
It goes also without framework. The structure is analogous. The code will be uglier.

Resources