I am trying to work out a way to add a text to the top left corner of the viewport when two of my sprites overlap. One of them is an item and the other is my character. I can already detect for overlap and even "pick" the item (kill the sprite) when I click a key. However I would like that a text saying something like "Click "E" to pick the sword!" appeared while the collision function is active and when I kill the sprite by picking it up the text would vanish.
I tried including the text in the collision function itself but I suppose this way I am rendering the text multiple times (the fps drops a lot) and I just want to create it once and remove it according to my purposes. My code:
function collisionHandler(dude,the_sword) {
pickObject.onDown.add(function () {
the_sword.kill();
}, this);
}
game.physics.isoArcade.overlap(dude, the_sword, collisionHandler, null, this);
// message saying to pick // Where to put this?
var style = { font: "30px Arial", fill: "#ff0044"};
var pick_message = this.game.add.text(0,20,"Click 'E' to pick up the sword!",style);
pick_message.fixedToCamera = true;
Any idea on how to do this?
In your 'create' function:
var style = { font: "30px Arial", fill: "#ff0044"};
var pick_message = this.game.add.text(0,20,"Click 'E' to pick up the sword!",style);
pick_message.fixedToCamera = true;
pick_message.visible = false;
Then:
function collisionHandler(dude,the_sword) {
pick_message.visible = true;
pickObject.onDown.add(function () {
the_sword.kill();
pick_message.visible = false;
}, this);
}
game.physics.isoArcade.overlap(dude, the_sword, collisionHandler, null, this);
Something like that should work. If you want to perform other action, like opening the door, you can use:
pick_message.setText("Click 'Q' to open the door!");
You don't have to create new text evertime, you can use one for different purposes.
Related
Is there any way we can position the borderless window in the file neutralino.config.json?
like : "borderless": { ...args }
or any other ways?
Now it just starts at somewhere random and cannot be moved
You can call Neutralino.window.move(x,y) in your javascript. (0,0) is the (leftmost,top) of the screen. You can find other window functions at https://neutralino.js.org/docs/api/window.
As an extension of your question, and like Klauss A's instinct suggests, you can call Neutralino.window.setDraggableRegion('id-of-element') where id-of-element is, as the name suggests, an id of an element in your html. Then, when you click and drag that element, Neutralino will automatically call Neutralino.window.move(x,y). setDraggableRegion() is not in the docs, but you can see it in the tutorial they made on YouTube, and it is still in the code.
The thing is, how Neutralino does this is by posting a message to the server, which adds quite a bit of delay, causing the drag to stutter. Here is the relevant code snippet in a prettified version of the neutralino.js file:
...
t.move = function(e, t) {
return r.request({
url: "window.move",
type: r.RequestType.POST,
isNativeMethod: !0,
data: {
x: e,
y: t
}
})
}, t.setDraggableRegion = function(e) {
return new Promise(((t, i) => {
let r = document.getElementById(e),
o = 0,
u = 0;
function s(e) {
return n(this, void 0, void 0, (function*() {
yield Neutralino.window.move(e.screenX - o, e.screenY - u)
}))
}
r || i(`Unable to find dom element: #${e}`), r.addEventListener("mousedown", (e => {
o = e.clientX, u = e.clientY, r.addEventListener("mousemove", s)
})), r.addEventListener("mouseup", (() => {
r.removeEventListener("mousemove", s)
})), t()
}))
}
...
I suspected this formulation of adding to the lag, since function* is a generator, and thus is inherently untrustworthy (citation needed). I re-wrote it in plain javascript, and reduced some of the lag. It still stutters, just not as much.
var dragging = false, posX, posY;
var draggableElement = document.getElementById('id-of-element');
draggableElement.onmousedown = function (e) {
posX = e.pageX, posY = e.pageY;
dragging = true;
}
draggableElement.onmouseup = function (e) {
dragging = false;
}
document.onmousemove = function (e) {
if (dragging) Neutralino.window.move(e.screenX - posX, e.screenY - posY);
}
I hope this helps. I was digging around in all this because the caption bar (aka, title bar) of the window is different from my system's color theme. I thought, "maybe I'll create my own title bar in HTML, with CSS styling to match my app." But due to the stuttering issues, I find it is better to have a natively-draggable title bar that doesn't match anything. I'm still digging around in the Neutralino C++ code to see if I could modify it and add a non-client rendering message handler (on Windows), to color the title bar the same as my app and still have nice smooth dragging. That way it would look "borderless" but still be movable.
I am having the same problem. My naive instinct is telling me that probably could be a way to create a custom element bar and use a function upon click& drag to move the window around.
Moving Windows in Neutralino is Quite Simple.
You can use the Neutralino.window API to move the windows.
Example:
Neutralino.window.move(x, y);
here x and y are the Coordinates on which our window will move to.
Note the this moves the window from the Top Left Corner of the window.
I have made this Neutralino Template - NeutralinoJS App With Custom Titlebar which might be useful if you are making a custom titlebar for your application.
Basically the problem is that after you rotate the camera, the points that are given as arguments in the callback for dragging are not what I expected. I'm guessing I have to Rotate the given points also but I just couldn't.
Can Someone explain what is going on, is this some kind of bug or what should I do in order the sprite to follow the mouse cursor?
Easiest way to explain the problem is to reproduce it:
1) Go to Phaser Example Runner
2) Copy- Paste this code:
var config = {
type: Phaser.WEBGL,
parent: 'phaser-example',
scene: {
preload: preload,
create: create
}
};
var game = new Phaser.Game(config);
function preload ()
{
this.load.image('eye', 'assets/pics/lance-overdose-loader-eye.png');
}
function create ()
{
var image = this.add.sprite(200, 300, 'eye').setInteractive();
this.cameras.main.setRotation(Math.PI);
image.on('pointerover', function () {
this.setTint(0x00ff00);
});
image.on('pointerout', function () {
this.clearTint();
});
this.input.setDraggable(image);
this.input.on('dragstart', function (pointer, gameObject) {
gameObject.setTint(0xff0000);
});
this.input.on('drag', function (pointer, gameObject, dragX, dragY) {
console.log(`x: ${dragX}, y: ${dragY}`);
gameObject.x = dragX;
gameObject.y = dragY;
});
this.input.on('dragend', function (pointer, gameObject) {
gameObject.clearTint();
});
}
3) Open the console, drag around the Eye and look at what coordinates are given.
4) If you remove line 24 (the rotation of the camera) Everything works as expected.
(The example is taken from Phaser 3 Official examples and a bit changed for the bug)
According to Phaser's API Documentation on the setRotation() method, the rotation given in radians applies to everything rendered by the camera. Unfortunately, your pointer isn't rendered by the camera so it doesn't get the same rotated coordinates. Not sure if this is a bug with the library or just a poorly documented exception, but I believe there is a workaround.
Create 2 variables to hold an initial position and a final position:
var image = this.add.sprite(200, 300, 'eye').setInteractive();
var initial = [];
var final = [];
Populate the initial position in your .on('dragstart') method:
this.input.on('dragstart', function (pointer, gameObject) {
initial = [
gameObject.x,
gameObject.y,
pointer.x,
pointer.y
];
gameObject.setTint(0xff0000);
});
Then, populate the final variable in your .on('drag') method:
this.input.on('drag', function (pointer, gameObject, dragX, dragY) {
final = [
gameObject.x, // not necessary but keeping for variable shape consistency
gameObject.y, // not necessary but keeping for variable shape consistency
pointer.x,
pointer.y
];
gameObject.x = initial[0] + (initial[2] - final[2]);
gameObject.y = initial[1] + (initial[3] - final[3]);
});
All we're doing here is keeping track of the change in pointer position and mimicking that change in our gameObject.
var itemshop_idx = {
idle:1,
out:2,
in:3
};
spine_itemShop.state.onComplete = function (trackIndex) {
switch(trackIndex){
case itemshop_idx.in://in
spinePlay_1(spine_itemShop, "popup_item_shop_idle", itemshop_idx.idle, true);
break;
case itemshop_idx.out://out
group_itemShop.visible = false;
break;
}
};
spine_itemShop.setAnimationByName(itemshop_idx.in, "popup_item_shop_in", false);
this code show me "popup_item_shop_in" animation just once.
when I play
spine_itemShop.setAnimationByName(itemshop_idx.in, "popup_item_shop_in", false);
again, I don't show "popup_item_shop_in" animation.
Just be showed "popup_item_shop_idle" animation directly.
what a problem?
I have searched solution about this problem use a lot of keyword like
spine/phaser/animation/pixi.js/orange group/github/time/replay/reset/init/etc...
But I can't find solution.
Suppose I have a large campsite like "seating" chart with several hundred lots sectioned off and outlined in photoshop. (each lot is roughly a square) Every lot needs to be numbered in photoshop and also editable in the future in case of changes. The lots are scattered and curve around the landscape so entering text in one layer seems out since for example lot 27 with be on the right and rotate 20 degrees to match the lot and yet lot 185 might be way over on the left at a far different angle.
Is there an elegant way to do this or at least quickly import a large number sequence that places one number per layer so I can grab them and orient them to their corresponding lot quickly instead of typing out and then positioning ever number individually? I'm having trouble thinking up an elegant/fast way to handle this in Photoshop...
Edit 1 - picture: http://i.imgur.com/UT3DRBi.jpg
You can do it with Extendscript. I am not the best of Extendscript programmers, but the following script will ask you for the number of text labels you want and add that many numbers on sepearate layers. Of course, you can diddle around with the font, colour, position, size etc. but it should get you started.
Here is an example - I turned off layers 4 and 5 so you can see each number is on a new layer.
Here it asks how many numbers you want:
// Setchell - AddNumbers - Adobe Photoshop Script
// Description: Asks user for number of numbers to add, each in own layer
// Version: 0.1
// Author: Mark Setchell (mark#thesetchells.com)
// Web: http://www.thesetchells.com
// ============================================================================
// Installation:
// 1. Place script in 'C:\Program Files\Adobe\Adobe Photoshop CS#\Presets\Scripts\'
// 2. Restart Photoshop
// 3. Choose File > Scripts > AddNumbers
// ============================================================================
// enable double-clicking from Mac Finder or Windows Explorer
// this command only works in Photoshop CS2 and higher
#target photoshop
// bring application forward for double-click events
app.bringToFront();
///////////////////////////////////////////////////////////////////////////////
// AddNumbers
///////////////////////////////////////////////////////////////////////////////
function AddNumbers() {
// Change Debug=1 for extra debugging messages
var Debug=1;
// Get user to enter common stem for JPEG names
var dialog = new Window('dialog', 'Setchell - AddNumbers');
dialog.size = {width:500, height:100};
dialog.stem = dialog.add('edittext',undefined, '<Enter ending number>');
dialog.stem.size = {width:400,height:25};
dialog.stem.value = true;
dialog.stem.buildBtn = dialog.add('button', undefined,'OK', {name:'ok'});
dialog.show();
// Pick up what user entered - just digits
var limit=dialog.stem.text.match(/\d+/);
// Debug
if(Debug)alert(limit);
var cnt;
var n=0;
var nPer=10;
var deltaX=app.activeDocument.width/nPer;
var deltaY=app.activeDocument.height/nPer;
var tX=0;
var tY=deltaY;
app.preferences.typeUnits = TypeUnits.POINTS;
for(cnt=1;cnt<=limit;cnt++){
// Adds a new layer to the active document and stores it in a variable named “myTextLayer”.
var myTextLayer = app.activeDocument.artLayers.add();
// Changes myTextLayer from normal to a text layer.
myTextLayer.kind = LayerKind.TEXT;
// Gets a reference to the textItem property of myTextLayer.
var myText = myTextLayer.textItem;
// sets the font size of the text to 16.
myText.size = 16;
// Sets the contents of the textItem.
myText.contents = cnt;
// Position the label - could be improved :-)
tX=n*deltaX;
myText.position = new Array(tX, tY);
n++;
if(n==nPer){
tY+=deltaY;
n=0;
}
}
return;
}
///////////////////////////////////////////////////////////////////////////////
// isCorrectVersion - check for Adobe Photoshop CS2 (v9) or higher
///////////////////////////////////////////////////////////////////////////////
function isCorrectVersion() {
if (parseInt(version, 10) >= 9) {
return true;
}
else {
alert('This script requires Adobe Photoshop CS2 or higher.', 'Wrong Version', false);
return false;
}
}
///////////////////////////////////////////////////////////////////////////////
// showError - display error message if something goes wrong
///////////////////////////////////////////////////////////////////////////////
function showError(err) {
if (confirm('An unknown error has occurred.\n' +
'Would you like to see more information?', true, 'Unknown Error')) {
alert(err + ': on line ' + err.line, 'Script Error', true);
}
}
// test initial conditions prior to running main function
if (isCorrectVersion()) {
// Save current RulerUnits to restore when we have finished
var savedRulerUnits = app.preferences.rulerUnits;
// Set RulerUnits to PIXELS
app.preferences.rulerUnits = Units.PIXELS;
try {
AddNumbers();
}
catch(e) {
// don't report error on user cancel
if (e.number != 8007) {
showError(e);
}
}
// Restore RulerUnits to whatever they were when we started
app.preferences.rulerUnits = savedRulerUnits;
}
I am writing a Chrome extension that saves/restores your browsers window state - So, I save the state of a given window:
var properties = [ "top",
"left",
"width",
"height",
"incognito",
"focused",
"type"
];
var json = {};
var cache = chrome_window_object;
// copy only the keys we care about:
_.each(properties,function(key,value) {
json[key] = cache[key];
});
// then copy the URLs of the tabs, if they exist:
if(cache.tabs) {
json.url = [];
_.each(cache.tabs,function(tab) {
json.url.push(tab.url);
});
}
return json;
At some point in the future, I remove all windows:
closeAllWindows: function(done_callback) {
function got_all(windows) {
var index = 0;
// use a closure to only close one window at a time:
function close_next() {
if(windows.length <= index) return;
var window = windows[index++];
chrome.windows.remove(window,close_next);
}
// start closing windows:
close_next();
}
chrome.windows.getAll(got_all);
}
and then I restore the window using:
chrome.windows.create(json_from_before);
The window that is created has an extra tab in it, whatever was in the window that I just closed... I am completely floored, and I assume the problem is something that I am doing in the code that I haven't posted (it's a big extension). I've spent a few hours checking code line by line and making sure I'm not explicitly asking for this tab to be created. So - has anybody seen anything like this before?