I have a multiatlas with different types of images inside:
this.load.multiatlas('images', 'images.json', 'images.png');
I want to make an animation from a particular set of images inside the atlas, say, 'face1'...'face9'. How can I target them when creating the animation? I mean, there is a method
this.anims.create({
key: 'faceAnim',
frames: [ {key: '...'}, {key: '...'} ]
})
But I don't know what would be placed inside the 'key' values to make it work. key: 'face1' obviously doesn't work, because Phaser needs to know which atlas to use.
Assuming all of the frames you want to use are named starting with face in your images.json file, you can do this:
this.anims.create({
key: 'images',
frames: this.anims.generateFrameNames('images', { prefix: 'face', start:1, end: 9},
[any other animation config settings you want, repeat, etc.]
});
I'm guessing on the start and end values because I can't see your images.json to know how you named everything, but this should get you started down the right path. This question might also help.
Related
I have a selectize where I set optgroups, give them an $order, and then try to set lockOptgroupOrder, which ends up throwing an exception: "Uncaught TypeError: Cannot read property '$order' of undefined".
This all works perfectly before I try to use lockOptgroupOrder (except that it sorts wrong). I cannot figure out why it can't find $order, when I'm clearly passing $order in as part of optgroups. (I've also tried setting optgroupOrder: ['first', 'recents', 'favorites', 'all'] with no luck.)
var stuff = $('#stuff').selectize({
optgroups: [
{value: 'first', label: '', $order: 1},
{value: 'recents', label: 'Recents', $order: 2},
{value: 'favorites', label: 'Favorites', $order: 3},
{value: 'all', label: 'All', $order: 4}
],
optgroupField: 'type',
lockOptgroupOrder: true,
//more things like load() and onChange()...
});
The error:
It's breaking in this loop:
I have exhausted all other forms of researching this error. Has anyone come across this before?
So after many, many hours of googling, chrome debugging, and general crying, I figured out the issue and now I'm posting my solution in case anyone else comes across this error.
Thanks to this discussion board:
lockOptgroupOrder breaks onChange
I was able to piece together that one of my data elements was missing a 'type' field (optgroupField). I stepped through all 1350 options before realizing that it was actually the default option I added to the select before turning it into a selectize. In this instance, I need this option to stay, so I can't just get rid of that line of html. But I also can't add a "type" attribute to the option, or even a data-type attribute, it doesn't pass it along.
Finally I figured out from this discussion board:
Add data-attribute to selectize.js options
that I can assign a data-data attribute and pass it the name and value, and then it would pass that attribute along when it turns into a selectize. So my final solution was to add what I needed via the option before it turns into a selectize:
<option selected disabled value="default" data-data='{"type":"first"}'>The Stuff</option>
May this help some other poor soul from having to go through this in the future.
I'm trying to set a specific anchor point when creating a link. I believe I'm doing everything correctly, but the anchor options are being ignored. In fact, any options I pass in are being ignored.
My code looks something like this:
new joint.shapes.standard.Link().target({id: 'xxx'}, {
anchor: {
name: 'center',
args: { dy: -15 }
}
});
The target id is being correctly handled, but whatever I pass in the second parameter is totally ignored.
Has anyone come across this before?
After experimenting, I worked out that when passing an object with id, rather than parsing a target element, that the opts need to go inside the object with the id. This is not documented AFAIK.
i.e.
.target({id: element.id, opts})
In my specific case, I'm passing the following:
.target({ id: to.id, anchor: { name: 'center', args: { dy: -15 }}})
This seems to work correctly
i need something for adding object in Phaser, this is something similar but in wade.
wade.addSceneObject(new SceneObject(dotSprite, 0, dotPosition.x, dotPosition.y));
Adding objects (usually called sprites) in phaser is super simple. Just load the image in the preloader function
function preload() {
game.load.image('mushroom', 'assets/sprites/mushroom2.png');
}
And then add the sprite in the create function
function create() {
// This simply creates a sprite using the mushroom image we loaded above and positions it at 200 x 200
var test = game.add.sprite(200, 200, 'mushroom');
}
Phaser has a ton of documentation on how to do things like this. I got the code from this example.
If you are completely new to phaser I highly recommend going through their tutorial
I am using NodeJS, Angular2, and the ng2-chartjs2. Below I listed the relevant parts of my code that is rendering charts. The data is loaded into this.data from an API using a fixed date range. I would like to allow the user to select a date range and then update the chart. From here I know that you can call update() on the chart object to update the data in it, but I don't know how to get a hold of the chart object, since the component code never actually has a reference to it - it's done automagically when the template is rendered. Looking at the source code (line 13) I see that the author intended to make the object available. I contacted the author but haven't received a response yet and need to get moving. I have learned a lot about Angular2 but am no expert yet, so perhaps a deeper understanding of Angular2 makes this obvious. How can I either get access to the object to call update() on it, or do it some other clean way?
The template contains
<chart [options]="simple.options"></chart>
and the component typescript code contains
import { ChartComponent } from 'ng2-chartjs2';
...
#Component({
selector: 'home',
templateUrl: 'client/components/home/home.component.html',
styleUrls: ['client/components/home/home.component.css'],
directives: [DashboardLayoutComponent, CORE_DIRECTIVES, ChartComponent],
pipes: [AddCommasPipe],
})
...
setCurrentSimpleChart = (simpleType: number): void => {
this.simple.options = {
type: 'line',
options: this.globalOptions,
data: {
labels: this.data[simpleType].labels,
datasets: [{
label: this.titles[simpleType],
data: this.data[simpleType].data,
backgroundColor: 'rgba(255, 99, 132, 0.2)',
borderColor: 'rgba(255,99,132,1)',
borderWidth: 1
}],
},
};
...
}
Update: In case this helps anyone: I actually have two different charts on the page, so I googled around based on the accepted answer and found ViewChildren, and mapped them to different variables so I can update them both separately, with
[this.simpleChart, this.liftChart] = this.chartComponents.toArray().map(component => component.chart);
(Note also that this was using an rc of angular2 - since then directives, etc have been moved out of the components themselves.)
You can hold reference to component by using ViewChild:
#ViewChild(ChartComponent) chartComp;
And then you can get chart object:
let chart = this.chartComp.chart;
Here is the corresponding plunker
This is about using i18next in a node.js backend.
This is the initialization:
i18next.init({
lng: 'de',
fallbackLng: ['de'],
ns: {
namespaces: ['formal', 'informal'],
defaultNs: 'formal'
},
fallbackToDefaultNS: true,
resStore: {
de: resourcesDE,
en: resourcesEN
}
});
where resourcesDE is an object with structure { formal: { }, informal: { }} and resourcesEN has the same structure but only 'formal', no 'informal' (but I have this problem even if there is 'informal' in resourcesEN).
Now, what I want to have is:
If I request the translation of 'informal:myKey' for English that the search route (== fallback) is:
(en)'informal:myKey' > (en)'myKey' > (de)'informal:myKey' > (de)'myKey'
or
(en)'informal:myKey' > (en)'myKey' > (de)'myKey'
but what actually happens is:
(en)'informal:myKey' > (de)'informal:myKey' > (de)'myKey'
meaning that the language changes before even trying to get a text of the same language from a different (the default) namespace.
How can I achieve this or something along those lines. I've also tried using a context instead of namespaces for these alternatives, but that seemed to behave the same. I'm glad to be proven wrong though.
The solution that worked out for me, in the end:
Instead of namespaces, I use special language flavors: 'de-INFORMAL' and 'en-INFORMAL'. If no label is found under 'en-INFORMAL', the lookup falls back to 'en', first and out of the box. If fallbackLng is set to 'de' it will fallback to that if the label in not found in 'en', either.