I am unable to add an existing object to my game
function create() {
const scene: Phaser.Scene = this
// scene.physics.add.image(400, 100, 'ball') THIS WORKS => BALL APEARS IN GAME
const ball = new Phaser.GameObjects.Image(scene, 400, 100, 'ball')
scene.physics.add.existing(ball) // nothing displays
}
What am I missing out on ?
I had the same problem, but then discovered I had to add it to both the scene and the physics manager, such as:
const ball = new Phaser.Physics.Arcade.Sprite(scene, 400, 100, 'ball');
this.add.existing(ball);
this.physics.add.existing(ball);
var config = {
width: 800,
height: 600,
type: Phaser.AUTO,
loader: {
baseURL: 'https://raw.githubusercontent.com/nazimboudeffa/assets/master/',
crossOrigin: 'anonymous'
},
parent: 'phaser-example',
physics: {
default: 'arcade'
},
scene: {
preload: preload,
create: create
}
};
var game = new Phaser.Game(config);
function preload()
{
this.load.image('dude', 'sprites/phaser-dude.png')
}
function create ()
{
var dude = new Phaser.GameObjects.Sprite(this, 100, 100, 'dude')
this.add.existing(dude)
}
<script src="//cdn.jsdelivr.net/npm/phaser#3.17.0/dist/phaser.min.js"></script>
Related
Greetings fellow Pimcore devs, I'm working in on a project that runs on Pimcore X ! But I'm running agains some "inconveniences". When I try to reach my controller I get the error message:
"App\Foo\Bar\Controller\SomeController" has no container set, did you forget to define it as a service subscriber?
let me show some code snippets:
src\Foo\Bar\Controller\SomeController
namespace App\Foo\Bar\Controller;
/**
* #Route("/admin/Bar")
*/
class SomeController extends AdminController
{
/**
* #Route("/foo", name="foo-you-too")
*
* #return Response
*/
public function someAction(): Response
{
die('howdy!');
}
}
src\Foo\Bar\DependencyInjection\BarBundleExtension
namespace App\Foo\Bar\DependencyInjection;
class BarBundleExtension extends ConfigurableExtension implements PrependExtensionInterface
{
/**
* {#inheritdoc}
*/
public function loadInternal(array $config, ContainerBuilder $container)
{
$loader = new Loader\YamlFileLoader($container, new FileLocator(__DIR__.'/../Resources/config'));
$loader->load('services.yml');
}
}
src/Foo/Bar/Resources/config/services.yml
services:
_defaults:
autowire: true
autoconfigure: true
public: false
#Foo\Bar\Controller\:
#App\Bar\Controller\:
App\Foo\Bar\Controller\:
resource: '../../Controller'
public: true
autowire: true
autoconfigure: true
tags: ['controller.service_arguments']
src/Foo/Bar/Resources/config/pimcore/routing.yml
app:
resource: "#Bar/Controller/"
type: annotation
src/Foo/Bar/Resources/public/js/startup.js
pimcore.registerNS("pimcore.plugin.menusample");
pimcore.plugin.menusample = Class.create(pimcore.plugin.admin, {
getClassName: function () {
return "pimcore.plugin.menusample";
},
initialize: function () {
pimcore.plugin.broker.registerPlugin(this);
this.navEl = Ext.get('pimcore_menu_search').insertSibling('<li id="pimcore_menu_mds" class="pimcore_menu_item pimcore_menu_needs_children">Howdy there!</li>', 'after');
this.menu = new Ext.menu.Menu({
items: [{
text: "Some text",
iconCls: "pimcore_icon_apply",
handler: function (button) {
new Ext.Window({
title: t('-'),
width: '50%',
height: '80%',
layout: 'fit',
items: [
{
xtype: "component",
autoEl: {
tag: "iframe",
src: "/admin/Bar/foo"
},
border: false
}
]
}).show();
}.bind(this)
}],
cls: "pimcore_navigation_flyout"
});
pimcore.layout.toolbar.prototype.mdsMenu = this.menu;
},
pimcoreReady: function (params, broker) {
var toolbar = pimcore.globalmanager.get("layout_toolbar");
this.navEl.on("mousedown", toolbar.showSubMenu.bind(toolbar.mdsMenu));
pimcore.plugin.broker.fireEvent("mdsMenuReady", toolbar.mdsMenu);
}
});
const menusamplePlugin = new pimcore.plugin.menusample();
I suspect there is something wrong with my services.yml, I already looked for similar StackOverflow questions but to no avail
I found the solution the name of the DependencyInjection class name was wrong it should be the BarExtension and not BarBundleExtension like in the namespace.
I created a new filter named svg to show only svg images or non-svg images.
But I don't understand where can I set the filter value to true or false?
The code is shown below.
Widget index file:
module.exports = {
label: 'Section SVG Images',
addFields: [
{
name: 'svg-images',
label: 'SVG Images',
type: 'singleton',
widgetType: 'apostrophe-images',
filters: {
svg: true
},
required: true
},
]
};
Custom cursor filter:
module.exports = {
construct: function(self, options) {
self.addFilter('svg', {
finalize: function() {
var svg = self.get('svg'); // <--- HARE svg is olways 'undefined'
if (typeof svg == 'undefined') {
return;
}
if (svg) {
var criteria = {
'attachment.extension': 'svg'
};
} else {
var criteria = {
'attachment.extension': { $ne: 'svg' }
};
}
self.and(criteria);
},
safeFor: 'public',
launder: function(a) {
return self.apos.launder.boolean(a);
}
});
}
};
filter is not a top level option for singleton fields in Apostrophe. That is unique to join-type fields. You could have this widget extend apostrophe-pieces-widgets, then you could probably set that same filters object directly on the new pieces widget. That should register the cursor filter, at least.
It's worth noting that there is currently a PR in progress to add filtering by both file type and orientation to Apostrophe core!
I am plotting a multipolygon in mapbox, that means even though the polygons are visibly separate but they are linked to the same source. If I add a click handler to this, and then click on any one of the polygons from the multipolygon, it effects all other polygons in the multipolygon equally.
Now my problem is, that I want to identify which specific polygon was clicked from the multipolygons.
Suppose I call a function when someone clicks on the source/layer, I want to send a unique identifier which denotes which polygon was clicked from among the multipolygons.
How can I achieve this?
Below is snippet of code that might be relevant:
for (let k = 0; k < sectionResult.data.response.length; k++) {
let features = sectionResult.data.response[k].coordinates.map((item) => {
return {
type: 'Feature',
geometry: {
type: 'Polygon',
coordinates: item
}
};
});
map.addSource(sectionResult.data.response[k].name, {
type: 'geojson',
data: {
type: 'FeatureCollection',
features: features
}
});
map.addLayer({
id: sectionResult.data.response[k].name,
type: 'fill',
source: sectionResult.data.response[k].name,
paint: {
'fill-color': '#00e',
'fill-opacity': 0.3
}
});
map.addLayer({
id: `${sectionResult.data.response[k].name}-labels`,
type: 'symbol',
source: sectionResult.data.response[k].name,
layout: {
'text-field': sectionResult.data.response[k].name,
'text-size': 20
},
paint: {
'text-color': '#fff308'
}
});
map.addLayer({
id: `${sectionResult.data.response[k].name}-borders`,
type: 'line',
source: sectionResult.data.response[k].name,
layout: {},
paint: {
'line-color': '#fff308',
'line-width': 3
}
});
map.on('mousemove', sectionResult.data.response[k].name, function (e) {
map.getCanvas().style.cursor = 'pointer';
let mapLayer = map.getLayer(
`${sectionResult.data.response[k].name}-borders-onHover`
);
if (typeof mapLayer === 'undefined') {
map.addLayer({
id: `${sectionResult.data.response[k].name}-borders-onHover`,
type: 'line',
source: sectionResult.data.response[k].name,
layout: {},
paint: {
'line-color': '#fff308',
'line-width': 3
}
});
}
});
map.on('mouseleave', sectionResult.data.response[k].name, function (e) {
map.getCanvas().style.cursor = '';
let mapLayer = map.getLayer(
`${sectionResult.data.response[k].name}-borders-onHover`
);
if (typeof mapLayer !== 'undefined') {
map.removeLayer(`${sectionResult.data.response[k].name}-borders-onHover`);
}
});
map.on('click', sectionResult.data.response[k].name, function (e) {
functionCall(); //I want to pass the unique identifier of the polygon that was clicked.
});
}
I think what you are looking for is queryRenderedFeatures this will return the features in a concrete filter, including the mouse position.
map.on('mousemove', function (e) {
var features = map.queryRenderedFeatures(e.point);
// Limit the number of properties we're displaying for
// legibility and performance
var displayProperties = [
'type',
'properties',
'id',
'layer',
'source',
'sourceLayer',
'state'
];
var displayFeatures = features.map(function (feat) {
var displayFeat = {};
displayProperties.forEach(function (prop) {
displayFeat[prop] = feat[prop];
});
return displayFeat;
});
document.getElementById('features').innerHTML = JSON.stringify(
displayFeatures,
null,
2
);
});
You have a full example here
I am trying to show attribute of wfs gml layer from geoserver as label in my openlayer3 application. I am successful to get label as text but unable to access the particular attribute 'name'. Given is the code I am working with.
var sourceWFS = new ol.source.Vector({
loader: function (extent) {
$.ajax('..../geoserver/harry/ows?', {
type: 'GET',
data: {
service: 'WFS',
version: '1.1.0',
request: 'GetFeature',
typename: 'ABC',
srsname: 'EPSG:3857',
geometryField:'geometry',
bbox: extent.join(',') + ',EPSG:3857'
}
}).done(function (response) {
sourceWFS.addFeatures(formatWFS.readFeatures(response));
});
},
strategy: ol.loadingstrategy.tile(ol.tilegrid.createXYZ()),
strategy: ol.loadingstrategy.bbox,
projection: 'EPSG:3857',
});
var layerWFS = new ol.layer.Vector({
source: sourceWFS
});
var interaction;
var interactionSelectPointerMove = new ol.interaction.Select({
condition: ol.events.condition.pointerMove
});
var interactionSelect = new ol.interaction.Select({
style: new ol.style.Style({
stroke: new ol.style.Stroke({
color: 'rgba(255,0,0,1.0)',
width: 1
}),
fill: new ol.style.Fill({
color: 'rgba(255,0,0,0.5)'
}),
text: new ol.style.Text({
text:("abcd")
})
})
});
var interactionSnap = new ol.interaction.Snap({
source: layerWFS.getSource()
});
I am getting abcd as label on selection
You will need a style function to set the text in the style from whichever feature property you wish to display
var selectStyle = new ol.style.Style({
stroke: new ol.style.Stroke({
color: 'rgba(255,0,0,1.0)',
width: 1
}),
fill: new ol.style.Fill({
color: 'rgba(255,0,0,0.5)'
}),
text: new ol.style.Text({
text:("abcd")
})
});
var interactionSelect = new ol.interaction.Select({
style: function(feature) {
selectStyle.getText().setText(feature.get('name'));
return selectStyle;
}
});
You will not get any attribute that is "hidden" by a GML attribute by default. The most common "missing" attributes are name and id. You can turn off this (standard complying) behaviour by checking the Override GML Attributes in the WFS services page for the version of GML your client is requesting.
What you are actually displaying is the "abcd" string itself and not the value of "abcd" property.
To access some feature property value in an ol.Style you must use a StyleFunction as follows :
style: function(feature, resolution){
return new ol.style.Style({
stroke: new ol.style.Stroke({
color: 'rgba(255,0,0,1.0)',
width: 1
}),
fill: new ol.style.Fill({
color: 'rgba(255,0,0,0.5)'
}),
text: new ol.style.Text({
text: feature.get("abcd");
})
})
}
I am using ALLOY DIALOG in Liferay 6.0.5 as follows:
function countPopup(){
AUI().use('aui-dialog', 'liferay-portlet-url', function(A) {
var dialog = new A.Dialog({
title: 'Upload Details',
centered: true,
modal: true,
width: 500,
height: 400,
bodyContent:"testing",
}).render();
});
}
I am getting in popup " testing ". But Instead of "bodycontent" I want to forward to one jsp file where i have written some logic. How to do that?
You must "plug" another module to feed a.Dialog with article desired.
Try some like this:
AUI().use('aui-dialog', 'aui-io', function(A) {
var dialog = new A.Dialog({
title: 'Upload Details',
centered: true,
modal: true,
width: 500,
height: 400,
}).plug(A.Plugin.IO, {uri: 'your_url.html'}).render();
});
I know this is too much late to give answer to this question but here is the solution.
<%
User selUser = (User)request.getAttribute("user.selUser");
PortletURL popupURL = renderResponse.createRenderURL();
popupURL.setWindowState(LiferayWindowState.POP_UP);
popupURL.setParameter("jspPage","Your jsp page path here");
String popup = "javascript:xyzPopUp('"+ popupURL.toString() + "');";%>
<aui:script>
Liferay.provide(
window,
'xyzPopUp',
function(url) {
var A = AUI();
var portletURL="<%=themeDisplay.getURLManageSiteMemberships().toString()%>";
var dialog = new A.Dialog(
{
modal: true,
centered: true,
destroyOnClose: true,
draggable: true,
height: 150,
resizable: false,
title: 'your title here',
width: 200
}
).plug(
A.Plugin.IO,
{
uri:url
}
).render();
},
['aui-dialog']
);
</aui:script>
This will open the given jsp page in to popup.