I succeeded to show a contentNode on a scrollView published from SpriteBuilder. But couldn't show it on a scrollView made programatically.
I just put these codes on didLordFromCCB MainScene.m. I did nothing with the SpriteBuilder project.
CCNodeColor* base = [CCNodeColor nodeWithColor:[CCColor blueColor] width:760 height:200];
base.position = ccp(30, 200);
CCNodeColor* color0 = [CCNodeColor nodeWithColor:[CCColor magentaColor] width:100 height:100];
color0.position= ccp(0, 0);
[base addChild:color0];
CCNodeColor* color1 = [CCNodeColor nodeWithColor:[CCColor magentaColor] width:100 height:100];
color1.position= ccp(660, 0);
[base addChild:color1];
CCNodeColor* color2 = [CCNodeColor nodeWithColor:[CCColor magentaColor] width:100 height:100];
color2.position= ccp(330, 100);
[base addChild:color2];
CCScrollView* sv = [[CCScrollView alloc]initWithContentNode:base];
[self addChild:sv];
sv.horizontalScrollEnabled = YES;
sv.contentSize = CGSizeMake(260, 200);
[sv setPositionInPoints:ccp(30, 200)];
I know that I'm late but maybe I still can help someone:
Inside of CCScrollView initialisation I found this line:
self.contentSizeType = CCSizeTypeNormalized;
So you just need to set contentSizeType back to "CCSizeTypePoints":
sv.contentSize = CCSizeTypePoints;
sv.contentSize = CGSizeMake(260, 200);
Hope this helps!
I signed up a few mins ago just to leave this comment :)
Related
How do I use video (mp4) as alpha map in babylonJS?
In three.js applying a video as texture is as simple as assigning the video texture to alphaMap (instead of the diffuse map).
Here's the expected result in three.js - Demo.
I attempted to do the same in babylonJS to no avail. Here's what I have so far babylonJs demo
var mat = new BABYLON.StandardMaterial("mat", scene);
var videoTexture = new BABYLON.VideoTexture("video", ["textures/babylonjs.mp4", "textures/babylonjs.webm"], scene, true, true);
mat.opacityTexture = videoTexture;
Any ideas are welcome.
Thanks
You can use videoTexture.getAlphaFromRGB = true; to use all three channels combined for the alpha. By default it only uses the red channel, which does not have enough variance in the source video for it to show.
The complete example:
var mat = new BABYLON.StandardMaterial("mat", scene);
var videoTexture = new BABYLON.VideoTexture("video", ["textures/babylonjs.mp4", "textures/babylonjs.webm"], scene, true, true);
videoTexture.getAlphaFromRGB = true;
mat.opacityTexture = videoTexture;
I need to distinctly select a single Curve of a clicked Path, how can I do that?
For example, in this sketch we can select a whole path when clicked on it:
Currently I can detect the curve (not sure if it is the appropriate approach, anyway):
..onMouseDown = (event) ~>
hit = scope.project.hitTest event.point
if hit?item
# select only that specific segment
curves = hit.item.getCurves!
nearest = null
dist = null
for i, curve of curves
_dist = curve.getNearestPoint(event.point).getDistance(event.point)
if _dist < dist or not nearest?
nearest = i
dist = _dist
selected-curve = curves[nearest]
..selected = yes
But whole path is selected anyway:
What I want to achieve is something like this:
There is an easier way to achieve what you want.
You can know if hit was on a curve by checking its location property.
If it is set, you can easily get the curve points and manually draw your selection.
Here is a sketch demonstrating it.
var myline = new Path(new Point(100, 100));
myline.strokeColor = 'red';
myline.strokeWidth = 6;
myline.add(new Point(200, 100));
myline.add(new Point(260, 170));
myline.add(new Point(360, 170));
myline.add(new Point(420, 250));
function onMouseDown(event) {
hit = paper.project.hitTest(event.point);
// check if hit is on curve
if (hit && hit.location) {
// get curve
var curve = hit.location.curve;
// draw selection
var selection = new Group(
new Path.Line({
from: curve.point1,
to: curve.point2,
strokeColor: 'blue',
strokeWidth: 3
}),
new Path.Rectangle({
from: curve.point1 - 5,
to: curve.point1 + 5,
fillColor: 'blue'
}),
new Path.Rectangle({
from: curve.point2 - 5,
to: curve.point2 + 5,
fillColor: 'blue'
})
);
// make it automatically be removed on next down event
selection.removeOnDown();
}
}
Update
As an alternative, to avoid messing up with the exported drawing, you can simply select the line instead of applying it a stroke style.
See this sketch.
var selection = new Path.Line({
from: curve.point1,
to: curve.point2,
selected: true
});
There is no built-in way to do what you'd like AFAIK.
You basically need to walk through the segments, construct a line, and see if the hit is on that particular line. The line cannot be transparent or it's not considered a hit which is why I give it color and width to match the visible line; it's also why it's deleted after the test.
Here's the sketch solution that implements a bit more around this:
function onMouseDown(event){
if (!myline.hitTest(event.point)) {
return
}
c1.remove()
c2.remove()
// there's a hit so this should find it
let p = event.point
let segs = myline.segments
for (let i = 1; i < segs.length; i++) {
let line = new Path.Line(segs[i - 1].point, segs[i].point)
line.strokeWidth = 6
line.strokeColor = 'black'
if (line.hitTest(p)) {
c1 = new Path.Circle(segs[i-1].point, 6)
c2 = new Path.Circle(segs[i].point, 6)
c1.fillColor = 'black'
c2.fillColor = 'black'
line.remove()
return
}
line.remove()
}
throw new Error("could not find hit")
}
Here's what I draw:
I have been trying to figure out how to pan/zoom using onMouseDrag, and onMouseDown in paperjs.
The only reference I have seen has been in coffescript, and does not use the paperjs tools.
This took me longer than it should have to figure out.
var toolZoomIn = new paper.Tool();
toolZoomIn.onMouseDrag = function (event) {
var a = event.downPoint.subtract(event.point);
a = a.add(paper.view.center);
paper.view.center = a;
}
you can simplify Sam P's method some more:
var toolPan = new paper.Tool();
toolPan.onMouseDrag = function (event) {
var offset = event.downPoint - event.point;
paper.view.center = paper.view.center + offset;
};
the event object already has a variable with the start point called downPoint.
i have put together a quick sketch to test this.
Unfortunately you can't rely on event.downPoint to get the previous point while you're changing the view transform. You have to save it yourself in view coordinates (as pointed out here by Jürg Lehni, developer of Paper.js).
Here's a version that works (also in this sketch):
let oldPointViewCoords;
function onMouseDown(e) {
oldPointViewCoords = view.projectToView(e.point);
}
function onMouseDrag(e) {
const delta = e.point.subtract(view.viewToProject(oldPointViewCoords));
oldPointViewCoords = view.projectToView(e.point);
view.translate(delta);
}
view.translate(view.center);
new Path.Circle({radius: 100, fillColor: 'red'});
I'm having an hard time trying to change the color of my UITabBarItem's icon. I used the code below to initialize all the parameters:
// Settings Tab
tabBarController?.tabBar.translucent = false
tabBarController?.tabBar.barTintColor = dark_color
let titoli:[String] = ["Feed","Categorie","Info"]
for (var i:Int=0; i<titoli.count; i++){
let tab:UITabBarItem? = tabBarController?.tabBar.items![i] as UITabBarItem?
tab?.image = UIImage(named: titoli[i])
tab?.title = titoli[i]
tab?.setTitleTextAttributes(NSDictionary(object: UIColor.whiteColor(), forKey: NSForegroundColorAttributeName) as? [String:AnyObject], forState: UIControlState.Selected)
tab?.setTitleTextAttributes(NSDictionary(object: UIColor(red: 0, green: 0, blue: 0, alpha: 0.6), forKey: NSForegroundColorAttributeName) as? [String:AnyObject], forState: UIControlState.Normal)
}
Am I missing something here?
FYI: just playing with XCode Beta and Swift 2.0
Already answered here but in short, click on the tab bar item you wish to change and you can add a new runtime attribute in the Storyboard which will change the entire item (image & text) when selected.
I have the following:
A background sprite called "_background"
3 x sprites "C4", D5" and "Hj"
The three sprites are added separately onto the background. I then, at a double click, want to make it possible to drag them all at the same time to another location on the screen while they stay in the same order and position.
The only way i have got it, nearly, to work is with this code:
- (void)tap2TouchesGesture:(UITapGestureRecognizer *)sender {
SKNode *removeNode = [_background childNodeWithName:#"C4"];
CGPoint aPos = removeNode.position;
[removeNode removeFromParent];
SKSpriteNode *topNode = [SKSpriteNode spriteNodeWithImageNamed:#"C4"];
topNode.position = aPos;
topNode.zPosition = 100;
topNode.name = #"C4";
[_background addChild:topNode];
removeNode = [_background childNodeWithName:#"D5"];
[removeNode removeFromParent];
SKSpriteNode *vv = [SKSpriteNode spriteNodeWithImageNamed:#"D5"];
vv.position = CGPointMake(-10, -10);
vv.zPosition = -10;
vv.userInteractionEnabled = NO; // just testing
vv.name = #"D5";
[topNode addChild:vv];
removeNode = [_background childNodeWithName:#"Hj"];
[removeNode removeFromParent];
vv = [SKSpriteNode spriteNodeWithImageNamed:#"Hj"];
vv.position = CGPointMake(-20, -20);
vv.zPosition = -50;
vv.userInteractionEnabled = NO; // just testing
vv.name = #"Hj";
[topNode addChild:vv];
}
After processing the above code i can move the pack of sprites but the current problem is that the parent, C4, do not seem to be on top. The only way of selecting C4 is to click on the part that is outside of any of the other sprites, not included the _background.
I would guess that this is not the best approach to performing this so i would like to ask for some help of how to do this correctly. Also, so i can select the C4 by clicking on the whole sprite.
You mean you want to be able to drag all three sprites simultaneously and synchronously, their position relative to each other always remaining the same?
What I always say in such cases. If you want multiple sprites (or any node) to do something together, then: add a SKNode, put all three sprites in it, drag the node. Bam, super simple!
I now got it to work, i had done a very simple mistake as i tried to move the selected node and not the topNode (container). Unbelievable, i should have seen that, especially after Steffens suggestion :-(
Thanks Steffen & Ben Stahl # Apple SpriteKit forum:-)
However, here is the code that i use for this example to work:
- (void)tap2TouchesGesture:(UITapGestureRecognizer *)sender {
_topNode = [SKNode node];
[_background addChild:_topNode];
SKSpriteNode *vv = [SKSpriteNode spriteNodeWithImageNamed:#"C4"];
[_topNode addChild:vv];
vv = [SKSpriteNode spriteNodeWithImageNamed:#"D5"];
[_topNode addChild:vv];
vv = [SKSpriteNode spriteNodeWithImageNamed:#"Hj"];
[_topNode addChild:vv];
_isThePackSelectedForAction = YES; // sprites are selected
}
- (void)handlePan:(UIPanGestureRecognizer *)sender {
_currentTouchLocationGlobal = [sender locationInView:sender.view];
_currentTouchLocationGlobal = [self convertPointFromView:_currentTouchLocationGlobal];
if (_isThePackSelectedForAction) {
_topNode.position = CGPointMake(_currentTouchLocationGlobal.x, _currentTouchLocationGlobal.y);
} else {
_currentNode.position = CGPointMake(_currentTouchLocationGlobal.x, _currentTouchLocationGlobal.y);
}
}