Ok I'm trying to make a package from a Phaser game, been researching this for a couple of days, but it doesn't seem to work.
I think I identified the problem though, hopefully somebody can help me with this!
I set everything up to make use of a local package, which all works.
Untill I'm preloading an asset.
This is my Menu class
Menu = function() {
console.log(this);
}
Menu.prototype = {
preload: function(){
this.load.image('background', 'assets/background.png');
console.log("ok in preload");
},
create: function(){
this.background = this.game.add.sprite(0, 0, 'background');
console.log("ok in create");
var text = "We're getting there";
var style = { font: "23px Arial", fill: "#ff0044", align: "center" };
var t = game.add.text(game.world.centerX, 0, text, style);
},
};
and I call this by doing
game = new Phaser.Game(400, 300, Phaser.AUTO, "gameWindow");
game.state.add('menu', Menu);
game.state.start('menu');
which all seems to work by looking at the console logs, as long as I don't try to load the image in the preload function, if I do it just keeps stuck in the preload function.
The background.png is located at my root folder going 'public/assets/background.png'.
So I'm thinking when I try to access this from a local package, it is having trouble getting there...
my package.js is this btw:
Package.describe({
summary: "game one"
});
Package.on_use(function (api, where) {
api.use(['phaserio'], 'client');
api.add_files(['states/menu.js'],
['client']);
api.export('Menu', ['client']);
});
Anybody out there, that sees what I'm doing wrong?
Thanks in advance!
you should be able to load public images from the app, but it depends when that preload sequence is running. Packages get parsed first. So is your new game created within a Meteor.startUp ->? by which time the app itself is initialized?
Also you can put assets in the package itself.
are you using 0.9? there are some issues with paths for static assets inside packages
see this thread:
https://github.com/meteor/meteor/issues/2602
for 0.9 packages you'll have to add a bit more info
Package.describe({
summary: "phaser for meteor",
version: '0.0.1',
git: 'https://github.com/dcsan/package-dev',
name: "YOURNAME:phaser"
});
currently if you use something like replacing colon with an underscore:
/packages/YOURNAME_phaser/added/path/to/asset.png
if you get phaser wrapped i would also be interested, so please publish it to atmosphere!
Related
I've just upgraded my project to Meteor v2.6 along with all packages. Everything runs smoothly on local so I pushed to Galaxy where I'm promptly met by this error when trying to load my app:
Nothing in the codebase itself was changed, needless to say the routes have been defined and have been working fine before.
Here's an excerpt of the code:
import "/imports/ui/layouts/dashboardLayout/dashboardLayout";
import "/imports/ui/layouts/landingLayout/landingLayout";
import "/imports/ui/pages";
import "/imports/ui/pages/landing/landingHeader/landingHeader";
if (Meteor.isClient && Meteor.isProduction) {
Router.plugin("reywood:iron-router-ga");
}
Router.configure({
trackPageView: true,
});
Router.onAfterAction(() => {
window.scrollTo(0, 0);
});
Router.route("/", {
name: "landing",
layoutTemplate: "landingLayout",
action: function () {
this.render("landingHeader", { to: "header" });
this.render("landingContent", {
to: "content",
data: { signUp: !!this.params.query.signUp },
});
},
});
Below the diff in the versions file>
Given it runs fine locally but has issues in Production, I wonder whether the problem is this bit of code here:
if (Meteor.isClient && Meteor.isProduction) {
Router.plugin("reywood:iron-router-ga");
}
I don't know why it's there (it's not my code originally) but I've noticed that the reywood:iron-router-ga version seems to have been downgraded for some reason during the upgrade:
When I try to force an update to reywood:iron-router-ga in the vain hope that by getting it back to v2.0.1 it will start working again, I get the message that "The specified packages are at their latest compatible versions".
Has anyone encountered this before/any idea what's going on? I'm not a fan of forcing different behaviour in Production from Dev as that obviously makes testing difficult/pointless - unless there's a good reason for it. Can anyone shed any light?
I've got a non-angular page made with fairly basic JS, and thought it'd be a splendid idea to try and add learn some Angular2 and use it for some new functionality.
My plan was that I'd bind an Angular2 component to an object that is being updated by the old code, and I'd use Angular2 magic to update a chunk of UI.
The problem is I cant convince Angular2 to react to any changes made in the outside JS. What the trick to doing that? Attempts at googling the problem lead to in depth explanations of Angular2's change detection process, which hasn't been helpful so far. Is this just an awful idea?
I found a random Angular2 jsfiddle and hacked it up to show the problem. Strings are added to 'window.names', but you dont see them until one is added from the angular side: https://jsfiddle.net/byfo3jg3/ . The code follows:
var names = ['Joe'];
setTimeout(function() {
names.push("Frank");
}, 1000);
setTimeout(function() {
names.push("Sterve");
}, 2000);
setTimeout(function() {
names.push("Garfield");
}, 3000);
(function() {
var HelloApp,
ListThing;
ListThing = ng
.Component({
selector: 'list-thing',
template: '<ul><li *ng-for="#name of names">{{name}}</li></ul>',
directives: [ng.NgFor]
})
.Class({
constructor: function() {
this.names = window.names;
setTimeout(function() {
this.names.push("Oh hai");
}.bind(this), 10000);
}
});
HelloApp = ng
.Component({
selector: 'hello-app',
template: '<list-thing></list-thing>',
directives: [ListThing]
})
.Class({
constructor: function() {}
});
document.addEventListener('DOMContentLoaded', function() {
ng.bootstrap(HelloApp);
});
}());
You will need to set the NgZone to window object and then call run function of the zone.
Please refer to Angular 2 How to get Angular to detect changes made outside Angular? SO Question
names should be component property to work inside of template:
constructor(){this.names = window.names}
Changes to window.names will not be detected by angular, so you have few options: poll names using setInterval(()=>{this.names = window.names}, 1000) or expose global callback:
constructor(zone:NgZone)
{
window.notify = ()=> {
zone.run(()=> {
this.names = window.names;
});
}
}
and call it from plain js window.notify() or use other methods to invoke change detection.
Is this just an awful idea?
Yes.
Angular's automatic change detection system assumes that changes to data (that you want your components to display) are happening inside an event handler that is monkey-patched by Zone.js. Because then Angular's change detection will execute when such an event handler fires (well, technically, it will execute after the event handler finishes).
If you want a component view to automatically update, you have to change the bound data inside Angular – inside the Angular zone. As #Jigar answered, you can modify your code to call angularZone.run(_ => // make changes here), but if you have to do that, you might as well move the code that manages and manipulates the data into a service (or a component, if the logic is minimal).
See also Günter's alternative approach: set up an event listener inside Angular (hence inside the Angular zone). Then fire that event whenever you make changes outside the Angular zone.
I'm having an issue triggering method calls while writing feature tests. I'm not actually given an error in the chimp terminal log, but the server.call line is where the failure is highlighted. I believe this might be related to the folder structure of the app (which I've loosely based on Letterpress) or the order in which the call is defined and then triggered. When I move the method call out to my main.js file (in the root folder of the app), it works without a problem.
hooks.js path: /app/tests/cucumber/features/support/hooks.js
(function(){
module.exports = function() {
this.Before(function() {
console.log("server calling");
server.call("fixtures/resetUsers"); //test stops here
});
};
})();
fixtures.js /app/packages/fixtures/fixtures.js
(function(){
'use strict';
Meteor.methods({
"fixtures/resetUsers": function() {
Meteor.users.remove({});
}
});
})();
package.js /app/packages/fixtures/packages.js
Package.describe({
name: 'forum:fixtures',
version: '0.0.1',
summary: '',
debugOnly: true
});
Package.onUse(function(api) {
api.versionsFrom('1.2.1');
api.use('ecmascript');
api.addFiles('fixtures.js', 'server');
});
Note: I originally didn't have the fixtures folder wrapped in the packages folder (it still didn't work then) but came across this post by #Xolv.io, the developers of Chimp.js who advised to do so.
with the new chimp, you can just use:
server.execute(function() {
// code you put here will run on the server
});
Check this repository for examples:
https://github.com/xolvio/automated-testing-best-practices/
In your sample repo, if you define a meteor method, 'something', you can call as server.call('something').
If you have a standard method definition (not even a meteor method), say something2=function(){}, with xolvio:backdoor, you can server.execute('something2'). ( calling chimp with --ddp switch)
I have some "classic" tiles on a Plone 4.3.6 site, which contain a richtext field and two RelationChoice fields using plone.formwidget.contenttree widgets.
I have installed plone.app.widgets 1.8.0 (along with p.a.contenttypes), and I can't get the new TinyMCE and the new relateditems pattern widget to work properly. If I load the tile view URL directly (at the ##edit-tile/.... URL), the widgets actually show up and work properly. But in the iframe/overlay, they don't.
The prep-overlay looks like this:
jQuery('.tile-editable').each(function () {
jQuery(this).find('a.tile-edit-link, a.tile-delete-link').
prepOverlay({
subtype: 'iframe',
config: {
onLoad: function (e) {
jQuery('body').addClass('noscroll');
return true;
},
onClose: function() {
jQuery('body').removeClass('noscroll');
location.reload();
}
}
});
});
The iframe loads ++resource++plone.app.widgets.js in the header, and the fields are given the pat-relateditems and pat-tinymce classes as expected. But the init method inside the relateditems pattern is never called. I suppose the iframe DOM is not parsed for patterns, but I don't know where to look for the cause of this.
FWIW, there is an error in the console:
Uncaught Error: Mismatched anonymous define() module: function (){return eb}
http://requirejs.org/docs/errors.html#mismatch
in plone.app.widgets.js:166, but I don't know where that's coming from, or if it matters.
Are there any tricks to getting mockup widgets to work in an ifram overlay?
To reinitialise all patterns you can do:
var registry = require("pat-registry");
registry.scan(SELECTOR); // document or iframe or wherever you want to rescan all patterns.
IMHO you could do this on the onLoad method.
I need to execute a jQuery function after a page loaded. The docs told me that it would be possible to hook into the 'PageLoaded' observer.
So I tried it like shown there. I put this function
Behaviour.register({
'#Form_ItemEditForm' : {
initialize : function() {
this.observeMethod('PageLoaded', this.pageLoaded);
this.observeMethod('BeforeSave', this.beforeSave);
this.pageLoaded(); // call pageload initially too.
},
pageLoaded : function() {
alert("You loaded a page");
},
beforeSave: function() {
alert("You clicked save");
}
}
});
into my cms.js which get's loaded in the backend. I tried it inside and outside (function($) { .. code ..}(jQuery)); and also inside the doucment.ready function inside the first function.
I always receive the same error in my console Uncaught ReferenceError: Behaviour is not defined.
Where is my mystake?
I believe you may have been looking at docs for 2.4, not 3.x
Version 3 and up are built using jQuery.entwine, where this from memory is old Prototype plugin stuff from 2.4, meaning of course that Behaviour is not defined, just as the error says.
The docs have recently been updated, so perhaps visit again, you might learn something new & much more helpful :)