Ui::ScrollView in cocos2dx v3.4 - Zooming

cocos2d-x C++
1

I have searched for many tutorials on ui::Scrollview in cocos2dx v3.4 but found none.
All I found is how to create a ScrollView which I have already done.

I want to add images and scroll them vertically such that the image at the center is slightly bigger than the other images. The description has been shown in the below picture.

EDIT: Changed the image for more clarity. Only the light yellow colored part is visible.

After Scrolling:

Can anyone give me an idea of how to do it or share some code?

2

This seems like a perfect use case for a listview? Something like this. Basically create a listview and then create a bunch of layouts with a child of the box sprite.

auto listView = cocos2d::ui::ListView::create();
cocos2d::ui::Layout* layout = cocos2d::ui::Layout::create();
layout->setBackGroundColorType(cocos2d::ui::LayoutBackGroundColorType::SOLID);
layout->setBackGroundColor(Color3B::WHITE);
layout->setContentSize(cocos2d::Size(960, 50));
layout->addChild(greenBox);
listView->pushBackCustomItem(layout);
listView->setItemsMargin(10);
listView->setGravity(cocos2d::ui::ListViewGravity::CENTER_VERTICAL);
listView->setContentSize(cocos2d::Size(960, LISTVIEW_HEIGHT));
listView->setBackGroundColorType(cocos2d::ui::LayoutBackGroundColorType::SOLID);
listView->setBackGroundColor(Color3B::WHITE);
3

Does that mean, I have to create all my sprites, add them to the layout and add the layout to ListView?
or
Do I have to create multiple layouts with each layout having a single sprite?

EDIT: I have added multiple layouts to the ListView. How do I make the focused layout look big like in the 2nd image given above.

4

Check this out http://www.sonarlearning.co.uk/coursepage.php?topic=game&course=cocos-studio&videoindex=6469#6469

5

I have the scrollView set. How can I make the image at center appear bigger than the other images when scrolled and how do I get the tag of each image when it is at the center!

Btw, I dont use Cocos Studio.

Does the co-ordinate system change for UI Elements?

6

I have added images to my scrollview. The below images represent my ScrollView. The light yellow is the scrollView. The height of InnerContainer is high.Hence, the other images are outside the yellow box.

Please, someone help me in zooming the the image which comes to center of the scrollView everytime. Refer the images in the first post for more clarity.

7

Ok, so your question is slightly different know (I think). You basically want zoom into a middle image (ie. scale it up). You can obviously do it yourself for the image that is initially the middle image. After that, I think the right way to do this would be to add an eventcallback:

scrollView->addEventListener()

and have the event listener determine what image is the middle image and scale it up. Make all the other images go back to a scale of 1.

8

@gkapur

In the OnTouchMoved method, I checked which sprite is in the center of ScrollView and scaled it up but it doesnt work.

9

Do you want to post your code in this thread? Don’t override the OnTouchMoved method. Create a callback function instead. Your code will look something like this:

    void MyClass::scrollCallBack(cocos2d::Ref* sv, cocos2d::EventType event) {
    auto scrollView = static_cast<cocosd::ui::ScrolView*>(sv);
    if (event == cocos2d::EventType::SCROLLING) { 
    // Do stuff here to the scrollView.
   }
    }

In the function that creates the scrollView:

svCallBack = CC_CALLBACK_2(MyClass::scrollCallBack,this);
scrollView->addEventListener(svCallBack);
10

This is what I did in the onTouchMoved method

Vec2 center = Vec2(scrollView->getContentSize().width/2,scrollView->getContentSize().height/2);

	Rect sp[10];

	for(int i = 0;i < 10;i++){
		sp[i] = b[i]->getBoundingBox();
		if(sp[i].containsPoint(center)){
			b[i]->setScale(1.0);
		}
	}

b[i] is an array of sprites in the ScrollView.
center is the center of ScrollView not the center of InnerContainerLayer.

What is svCallback in your code?

11

Overriding onTouchMoved is a bad idea. svCallBack is a callback that is run every time an “action” happens to the scrollView. Take a look at the addEventListener function on scrollview objects (look in the code of a scrollView). The only issues is that the callback is called_before_ the scrollView moves the innercontainer. That said since the moves should be incrementally small I don’t think it’s a huge issue.

Alternatively, just put something in the update function of the parent of the scrollView that checks each frame what the middle object is on the scrollView and scales that up or down as needed.

12

@gkapur
I just found out whats wrong in the below code.

Vec2 center = Vec2(scrollView->getContentSize().width/2,scrollView->getContentSize().height/2);

Rect sp[10];

for(int i = 0;i < 10;i++){
	sp[i] = b[i]->getBoundingBox();
	if(sp[i].containsPoint(center)){
		b[i]->setScale(1.0);
	}
}

Let, ScrollView width = 100, ScrollView Height = 200
InnerContainerWidth = 100, InnerContainerHeight = 800
innerContainerAnchorPoint = (0,0)

According to code, center = (50,100)
The sprite which is at (50,100) in InnerContainer scales Up. So, only one sprite sacales up always!