Loop wheel scrollable menu

cocos2d-x C++
#1

Hi,
I’m thinking on make a wheel scrollable menu like in zookeeper (Like a wheel, the menu is a loop. Allways that I swipe right, a menu item will bring to front):

I don’t know if it’s possible to do it with a CCScrollView + CCMenuItem/CCControlButton…
Can you suggest me how to start?

Thankx,

#2

Any idea?

#3

Javi Morales wrote:

Any idea?

it is called a carasole…. i did a similar one in flash using as3… here is the code it is commented

package Classes.Game
{
import flash.display.MovieClip;
import flash.display.Bitmap;
import flash.events.;
import flash.utils.;
import Classes.Helpers.StaticImage;
import flash.events.MouseEvent;
import Classes.Particles.TurbulanceParticle;
import Classes.Particles.Star;
import Classes.Particles.Star2;
import Classes.Particles.Particle;
import Classes.Helpers.**;
public class Carasoul extends MovieClip
{
var updateCounter:int =0;
var previousObjectName:String;
var handTut2: HandTutorial2;
var currentValueOfi:int;
public var currentBookNumber:int;
var Base:StaticImage;
var Book:Books;
var Cover:StaticImage;
var bookPages:BookPages;
var imageHolders:Array;
var focalLength:Number = 1000;
//Set the vanishing point
var vanishingPointX:Number = 800/2;
var vanishingPointY:Number = 600/2;
//The 3D floor for the images
var floor:Number = ~~100;
//We calculate the angleSpeed in the ENTER_FRAME listener
var angleSpeed:Number = 0;
//Radius of the circle
var radius:Number = 150;
//number if images
var images_num:int = 7;
//Calculate the angle difference between the images
var angleDifference:Number = Math.PI * / 180;
var isBookOpen:Boolean = false;
public static var leftButton:StaticImage;
public static var rightButton:StaticImage;
public function Carasoul
{
addEventListener;
trace;
cSoul:this;
imageHolders = ;
//Get the angle position for the image
var startingAngle:Number = angleDifference * i;
//Set a “currentAngle” attribute for the imageHolder
imageHolder.currentAngle = startingAngle;
//Position the imageHolder
imageHolder.ypos3D = radius * Math.sin * 0.5;
imageHolder.zpos3D = radius * Math.cos * 0.5;
//imageHolder.xpos3D = floor;

//Calculate the scale ratio for the imageHolder
var scaleRatio = focalLength/;
//Scale the imageHolder according to the scale ratio
imageHolder.scaleX = imageHolder.scaleY = scaleRatio;
//Set the alpha for the imageHolder
imageHolder.alpha = 0.5;
//We want to know when the mouse is over and out of the imageHolder
//imageHolder.addEventListener;
//imageHolder.addEventListener;
//We also want to listen for the clicks
//imageHolder.addEventListener;
//Position the imageHolder to the stage
imageHolder.x = vanishingPointX + imageHolder.xpos3D * scaleRatio;
imageHolder.y = vanishingPointY + imageHolder.ypos3D * scaleRatio;
//Add the imageHolder to the stage
addChild;
}
//Add an ENTER_FRAME for the rotation
addEventListener;
}
function rotateCarousel:void
{
//Calculate the angleSpeed according to mouse position
angleSpeed =~~ vanishingPointY)** 0.0002;

//Loop through the images
for (var i:uint = 0; i < imageHolders.length; i+)
{
//Assigning imageHolder to a local variable
var imageHolder:MovieClip = ;
//Update the imageHolder’s current angle
imageHolder.currentAngle= angleSpeed;

//Calculate a scale ratio
var scaleRatio = focalLength/(focalLength + imageHolder.zpos3D);

//Scale the imageHolder according to the scale ratio
imageHolder.scaleX=imageHolder.scaleY=scaleRatio;

//Set a new 3D position for the imageHolder
//imageHolder.xpos3D= ~~radius*Math.cos;
imageHolder.ypos3D=floor + radius*Math.sin;
imageHolder.zpos3D=radius*Math.cos;
//Update the imageHolder’s coordinates
imageHolder.x=vanishingPointX+imageHolder.xpos3D*scaleRatio;
imageHolder.y=vanishingPointY+imageHolder.ypos3D*scaleRatio;
}
//Call the function that sorts the images so they overlap each others correctly
sortZ;
}
//for sorting and overlaping images on each others correctly
function sortZ:void
{
//Sort the array so that the image which has the highest
//z position is first in the array
imageHolders.sortOn;
//Set new child indexes for the images
for
{
setChildIndex;
if
{
if
{
previousObjectName = imageHolders[i].name
imageHolders[i].alpha = 1.0;
trace;
currentValueOfi = i;
addRemoveBookPages;
}
imageHolders[i].addEventListener;
}
else if
{
imageHolders[i].alpha = 0.5;
imageHolders[i].removeEventListener;
}
/*else if
{
imageHolders[i].alpha = 0.0;
imageHolders[i].removeEventListener;
} */
}
}
//for mouse over event
function mouseOverImage:void
{
//Set alpha to 1
e.target.alpha=1;
//removeEventListener;
}
//for mouse out event
function mouseOutImage:void
{
e.target.alpha=0.5;
//addEventListener;
}
//for onclick event
function imageClicked:void
{
handTut2 = new HandTutorial2;
handTut2.name = “handTut2”;
handTut2.scaleX = 0.75; handTut2.scaleY = 0.75;
addChild;
LevelSelectionSceen.LSS.removeHand;
trace;
removeEventListener;
/*if !=null)
{
trace;
removeChild;
}*/
currentBookNumber = e.currentTarget.name;
Base= new StaticImage
addChild;
Base.x = e.currentTarget.x;
Base.y = e.currentTarget.y;
Cover= new StaticImage
addChild;
Cover.scaleX =~~1;
Cover.x = e.currentTarget.x-200-5;
Cover.y = e.currentTarget.y-5;
Cover.addEventListener(MouseEvent.CLICK,onCoverClick);

addLeftAndRightButtons();

Book= new Books(e.currentTarget.name);
addChild(Book);
Book.x = e.currentTarget.x-5; Book.y= e.currentTarget.y-5;

imageHolders[currentValueOfi].visible = false;

bookPages.visible = false;

//e.currentTarget.
}

function addLeftAndRightButtons()
{
rightButton = new StaticImage(“Next”);
rightButton.x = 560-35; rightButton.y = ~~50;//y =~~225
rightButton.name = “rButton”;
rightButton.addEventListener(MouseEvent.CLICK,onLRBTNClick);
addChild(Carasoul.rightButton);

leftButton = new StaticImage(“Back_”);
leftButton.x = 260-35; leftButton.y = ~~50;
leftButton.name = “lButton”;
leftButton.addEventListener;
addChild;
}
function onLRBTNClick
{
if
{
Carasoul.leftButton.visible = false;
Carasoul.rightButton.visible = false;
}
Book.onPageClick;
}
function removeLeftAndRightButtons
{
removeChild;
removeChild;
}

function onCoverClick
{
removeChild;
removeLeftAndRightButtons;
Books.currentPageNumber = 0;
removeChild;
removeChild;
removeChild;
imageHolders[currentValueOfi].visible = true;
addEventListener;
bookPages = new BookPages;
addChild;
bookPages.x =~~110; bookPages.y = ~~160;
bookPages.scaleX = 1.25;bookPages.scaleY = 1.25;
bookPages.name = “currentPage”;
bookPages.visible = true;
}
function addRemoveBookPages
{
if !=null)
{
trace;
removeChild;
}
bookPages = new BookPages;
addChild;
bookPages.x =~~110; bookPages.y = –160;
bookPages.scaleX = 1.25;bookPages.scaleY = 1.25;
bookPages.name = “currentPage”;

}

function getCurrentBook():int
{
return currentBookNumber;
}

function onParticleClick(e:MouseEvent)
{
//var star:Class = new Star2();
var playInst:AudioPlayer = new AudioPlayer();
playInst.PlaySound(“click__”);

var particle:Particle = new Particle(mouseX,mouseY);
addChild(particle);

particle.mouseEnabled = false;
}

}//classes

}//package

#4

Javi, did that work for you?

#5

Hi Jesus, finally I did one by myself, to understand a little more about this framework.

Maybe is a little more messy code :stuck_out_tongue: I will post it after clean it.

Thx,

#6

Javi, I also want to make ui like this,
Could you post your concept in cocos2d-x?
I’ll very appreciate it.