Spritekit Hexagonal map: tile detection in end SKAction. - swift3

I ask this question because i didn't found any solution for this kind of issues. In fact Hex map support are not very popular.
I'am making a game with the SpriteKit Framework. I use SktileMapNode with an Hexagonal map, with 1 set of 4 groups tiles.
The playernode moves on each tiles, what i wan't it's when he move on a specifics tiles some event can be triggered ( print , function , Sktransition) but for the moment i'm stuck on just detecting those tiles.
I setup the user data ( as bool ) and apply them in the code , but nothing happened, even with a touch event on a tile.
extension GameScene {
func move(theXAmount:CGFloat , theYAmount:CGFloat, theAnimation:String ) {
let wait:SKAction = SKAction.wait(forDuration: 0.05)
let walkAnimation:SKAction = SKAction(named: theAnimation, duration: moveSpeed )!
let moveAction:SKAction = SKAction.moveBy(x: theXAmount, y: theYAmount, duration: moveSpeed )
let group:SKAction = SKAction.group( [ walkAnimation, moveAction ] )
let finish:SKAction = SKAction.run {
let position = self.thePlayer.position
let column = self.galaxieMapnode.tileColumnIndex(fromPosition: position)
let row = self.galaxieMapnode.tileRowIndex(fromPosition: position)
if let tile:SKTileDefinition = self.galaxieMapnode.tileDefinition(atColumn: column, row: row) {
if let tileBoolData = tile.userData?["wormholeTile"] as? Bool {
if (tileBoolData == true) {
print("Wormhole touched")
}
}
} else {
print("different tile")
}
}
Only the "different tile " output is fired.
Any help are welcome.
Link for image example : the thing I want

I think you want to run your finish block after the other actions have completed? You can do this as a sequence.
var sequence = [SKAction]()
let action = SKAction.move(to: location, duration: 1)
let completionHandler = SKAction.run({
// Check tile info here
})
sequence += [action, completionHandler]
self.player.run(SKAction.sequence(sequence))
Typically in a hexagonal map you would move the player to an adjacent tile and check the tiles attributes, then continue with the next move action. This requires the graph and pathfinding functionality from GameplayKit.

Related

Chartjs unexpected visual animation effect when adding data

I have a long array with data that I slice with Javascript in order to display data of different date ranges in my chart. This way the backend only needs to get the data once, and I can the just slice it on the client side.
// All data
var allLabels = [
// data here
];
var allData = [
// data here
];
Then I do:
var labelsCount = allLabels.length;
var dataCount = allData.length;
var updatedLabels;
var updatedData;
if($date_range === 'last_7_days')
{
updatedLabels = allLabels.slice(labelsCount - 7);
updatedData = allData.slice(labelsCount - 7);
}
if($date_range === 'last_30_days')
{
updatedLabels = allLabels.slice(labelsCount - 30);
updatedData = allData.slice(labelsCount - 30);
}
scoreChart.data.labels = updatedLabels;
scoreChart.data.datasets[0].data = updatedData;
scoreChart.update({
duration: 1000,
easing: 'easeInOutExpo'
});
This all works as expected. When switching from 30 to 7 days the points on the right of the 7 days disappear, and the graph scales and grows nicely to the new 7 days x-axis.
The other way around, when you have the graph of 7 days and then switch to 30, produces an ugly visual effect where the first point of the graph sticks to the side, overlaps the new data points and then animates.
After the animation the graph looks as expected, it's just the animation that's ugly. It's a little tricky to explain so hopefully the screenshots help. Green arrows indicate the animation direction. I've set the animation duration to 10s so I can take this screenshot, the red circle highlights the point that starts on the right of the graph and then animates to the left.
I've also tried adding this:
scoreChart.data.labels.pop();
scoreChart.data.datasets[0].data.pop();
scoreChart.update();
and this:
scoreChart.data.labels = [];
scoreChart.data.datasets[0].data = [];
scoreChart.update();
Before the line scoreChart.data.labels = updatedLabels; but that gives the same result.
Another thing I can do is only update the labels. The result is that the chart just zooms on the timeline when changing date ranges, without the nice animation as they have in the example.
You could try to first remove all labels and the data when switching to 'last_30_days'.
if($date_range === 'last_30_days')
{
scoreChart.data.labels = [];
scoreChart.data.datasets[0].data = [];
scoreChart.update({
duration: 500,
easing: 'easeInOutExpo'
});
updatedLabels = allLabels.slice(labelsCount - 30);
updatedData = allData.slice(labelsCount - 30);
}

Sprite Kit Swift - Character accelerate and decelerate

I'm new to Swift Sprite Kit, I wanted to move a node with start speed = 0, until maximum speed when a button is press and hold for 2 seconds and decelerate with -5 speed until minimum speed when the button released. I've done something like this:
func moving(force : CGFloat){
self.player.physicsBody?.applyImpulse(CGVector(dx:force*cos(player.zRotation + 1.57079633), dy: initialforce*sin(player.zRotation + 1.57079633)))
}
In touch function:
let timerAction = SKAction.wait(forDuration: 0.05)
let update = SKAction.run({
if(self.initialforce < Constants.maximumMoveForce){
self.force += 1.0
}else{
self.moving(force: Constants.maximumMoveForce)
self.force = Constants.maximumMoveForce
}
})
let sequence = SKAction.sequence([timerAction, update])
let repeats = SKAction.repeatForever(sequence)
self.run(repeats, withKey:"repeatAction")
and how am I gonna decelerate it at touchEnd? Or am I making wrong approach? Need help.

SCNProgram - video input

How can I attach a video input to a SCNProgram in SceneKit?
Without using a custom program, I could do:
func set(video player: AVPlayer, on node: SCNNode) {
let size = player.currentItem!.asset.tracks(
withMediaType: AVMediaTypeVideo).first!.naturalSize
let videoNode = SKVideoNode(avPlayer: player)
videoNode.position = CGPoint(x: size.width/2, y: size.height/2)
videoNode.size = size
let canvasScene = SKScene()
canvasScene.size = size
canvasScene.addChild(videoNode)
let material = SCNMaterial()
material.diffuse.contents = canvasScene
node.geometry?.materials = [material]
}
which renders the video to a SKScene and uses it as an input for a SCNMaterial.
I'd like to use a SCNProgram on the node, but I could not figure out to attach the player input. I don't mind if the solution doesn't uses a SKScene intermediate rendering. It actually sounds even better if it's possible to do without.
Have you tried using AVPlayerLayer, which is a subclass of CALayer ? You can feed a CALayer to the contents property of an SCNMaterialProperty.

Removing body (balls) from physics engine

I've been trying to remove elements (balls) that have been added to the Physics engine, but I can't find a way to do it.
This is the code I'm using to add the molecules to the Physics Engine:
var numBodies = 15;
function _addMolecules() {
for (var i = 0; i < numBodies; i++) {
var radius = 20;
var molecule = new Surface({
size: [radius * 2, radius * 2],
properties: {
borderRadius: radius + 'px',
backgroundColor: '#'+(0x1000000+(Math.random())*0xffffff).toString(16).substr(1,6)
}
});
molecule.body = new Circle({
radius: radius,
mass: 2
});
this.pe.addBody(molecule.body);
this.molecules.push(molecule);
this.moleculeBodies.push(molecule.body);
molecule.state = new Modifier({origin: [0.5, 0.5]});
//** This is where I'm applying the gravity to the balls and also where I'm checking the position of each ball
molecule.state.transformFrom(addBodyTransform.bind(molecule.body));
this._add(molecule.state).add(molecule);
}
}
and on the addBodyTransform function I'm adding the gravity to the balls and checking their position, and for any that are outside the top part of the viewport I want to remove it completely (I'm only using walls on the left, right and bottom edges of the viewport).
function addBodyTransform() {
var pos;
for (var i = 0; i < thisObj.moleculeBodies.length; i++) {
pos = thisObj.moleculeBodies[i].getPosition();
if(pos[1]<(-windowY/2)){
//I tried this but it doesn't work
thisObj.pe.removeBody(thisObj.moleculeBodies[i]);
thisObj.moleculeBodies[i].render = function(){ return null; };
}
}
thisObj.gravity.applyForce(this);
return this.getTransform();
}
It doesn't work. I tried a couple of other things, but no luck. Whereas changing the position of the balls on the function above worked fine:
thisObj.moleculeBodies[i].setPosition([0, 0]);
Does anybody have any idea how to remove a body (a circle in this case)?
P.S.: thisObj is the variable I'm assign the "this" object to in the constructor function and thisObj.pe is the instance of the PhysicsEngine(). Hope that makes sense.
After some investigation, using the unminified source code and trying out different things, I realised that there was something weird going on in the library.
Having a look at the repository, I found out that the function _getBoundAgent is being used before it is defined, which matched with the error I was getting (you can check it here: https://travis-ci.org/Famous/physics). So it looks like it is a bug in the Famo.us source-code. Hopefully it will be fixed in the next release.
For the time being, I had to create a hack, which is basically detaching all agents (as well as gravity) from the balls that go outside the viewport and setting their (fixed) position far outside the viewport (about -2000px in both directions).
I know it is not the best approach (a dirty one indeed), but if you have the same problem and want to use it until they release a fix for that, here is what I did:
function addBodyTransform() {
var pos = this.body.getPosition();
//Check if balls are inside viewport
if(pos[1]<(-(windowY/2)-100)){
if(!this.removed){
//flagging ball so the code below is executed only once
this.removed = true;
//Set position (x and y) of the ball 2000px outside the viewport
this.body.setPosition([(-(windowX/2)-2000), (-(windowY/2)-2000)]);
}
return this.body.getTransform();
}else{
//Add gravity only if inside viewport
thisObj.gravity.applyForce(this.body);
return this.body.getTransform();
}
}
and on the _addMolecules function, I'm adding a "molecule.removed = false":
function _addMolecules() {
for (var i = 0; i < numBodies; i++) {
...
molecule.state = new Modifier({origin: [0.5, 0.5]});
//Flagging molecule so I know which ones are removed
molecule.removed = false;
molecule.state.transformFrom(addBodyTransform.bind(molecule));
this._add(molecule.state).add(molecule);
}
}
Again, I know it is not the best approach and I will be keen in hearing from someone with a better solution. :)

3D rotation of a element in RaphaelJS

I am hoping you might be able to help me determine if the following animation is allowed in raphael.js. I am trying to have an element fly off the page, the idea is to have it appear to fall/fly off in 3D. I am able to tell the element to rotate X degrees and slide off but its lacking the look of the element being independent of hte background. What I would like to do is be able to tell raphael to rotate the top corner "out" as it falls giving the illusion of it falling out of view as picture falling off of a wall. Is this even possible or does Raphael only operate in two dimensional space?
Raphael only deals with 2D space. To implement a 3D flip you have to fake it. Thankfully Raphael implements Scale(sx,sy,x,y) as a transform op, so you can scale about an origin to fake a 3D 'flip' rotation.
For example:
Raphael.el.flipXTransform = function (parentBbox) {
var x = this.getBBox().x;
var width = this.getBBox().width;
parentBbox = parentBbox || { width:width, x: x};
var parentWidth = parentBbox.width;
var parentX = parentBbox.x;
var originX = parentX - x + parentWidth / 2;
return 's-1,1,' + originX + ',0';
};
Raphael.el.flipX = function (duration, easing, parentBbox) {
duration = duration || 500;
easing = easing || 'easeInOut';
var scale = this.flipXTransform(parentBbox);
this.animate({ transform: '...' + scale }, duration, easing);
};
Here's a fiddle example for you to play with. The downside is this doesn't convey a perspective like a true 3D rotate does.