読者です 読者をやめる 読者になる 読者になる

個人的なメモ 〜Cocos Sharp 情報を中心に‥

Tomohiro Suzuki @hiro128_777 のブログです。Cocos Sharp の事を中心に書いています。 Microsoft MVP for Visual Studio and Development Technologies 2017- 本ブログと所属組織の公式見解は関係ございません。

Cocos Sharp 画面遷移のアニメーション (6) CCTransitionRotoZoom, CCTransitionShrinkGrow, CCTransitionSlideIn*

はじめに

こんにちは、@hiro128_777です。
今回も、前回に引き続き Cocos Sharp の画面遷移の際のアニメーションについてご紹介します。

前回はCCTransitionPageTurnCCTransitionProgress*のアニメーションをご紹介しました。
hiro128.hatenablog.jp

今回はCCTransitionRotoZoomCCTransitionShrinkGrow CCTransitionSlideIn*をご紹介します。

今回も言葉で表現するよりも見ていただいたほうが早いので、早速アニメーションを実際に見てみましょう。

画面遷移の際のアニメーション ~CCTransitionRotoZoom~

CCTransitionRotoZoom

f:id:hiro128:20170421202924g:plain

画面遷移の際のアニメーション ~CCTransitionShrinkGrow~

CCTransitionShrinkGrow

f:id:hiro128:20170421203030g:plain

画面遷移の際のアニメーション ~CCTransitionSlideIn*~

CCTransitionSlideInB

f:id:hiro128:20170421203111g:plain

CCTransitionSlideInL

f:id:hiro128:20170421204657g:plain

CCTransitionSlideInR

f:id:hiro128:20170421204741g:plain

CCTransitionSlideInT

f:id:hiro128:20170421203320g:plain

というわけで、色々なアニメーションがありますので、皆さんも、色々試してみてください!

では、今回はここまでです。

画面遷移の際のアニメーションはあと1回で全部ご紹介が終わる予定です。

Cocos Sharp 画面遷移のアニメーション (5) CCTransitionPageTurn, CCTransitionProgress*

はじめに

こんにちは、@hiro128_777です。
今回も、前回に引き続き Cocos Sharp の画面遷移の際のアニメーションについてご紹介します。

前回はCCTransitionJumpZoomCCTransitionMoveIn*のアニメーションをご紹介しました。
hiro128.hatenablog.jp

今回はCCTransitionPageTurnCCTransitionProgress*をご紹介します。

言葉で表現するよりも見ていただいたほうが早いので、早速アニメーションを実際に見てみましょう。

画面遷移の際のアニメーション ~CCTransitionPageTurn~

CCTransitionPageTurn (backwards = true)

f:id:hiro128:20170419203637g:plain

CCTransitionPageTurn (backwards = false)

f:id:hiro128:20170419203716g:plain

なんとも言葉では表現できない動きです(笑)。
backwardstruefalseかで向きが逆になります。

画面遷移の際のアニメーション ~CCTransitionProgress*~

こちらも説明するより見ていただいたほうが早いので、早速アニメーションを実際に見てみましょう。
ちなみに、RadialCWはClockWise、RadialCCWはCounterClockWiseの事です。

CCTransitionProgressHorizontal

f:id:hiro128:20170419203802g:plain

CCTransitionProgressVertical

f:id:hiro128:20170419204636g:plain

CCTransitionProgressInOut

f:id:hiro128:20170419203932g:plain

CCTransitionProgressOutIn

f:id:hiro128:20170419204009g:plain

CCTransitionProgressRadialCW

f:id:hiro128:20170419204416g:plain

CCTransitionProgressRadialCCW

f:id:hiro128:20170419204442g:plain

というわけで、色々なアニメーションがありますので、皆さんも、色々試してみてください!

では、今回はここまでです。

Cocos Sharp 画面遷移のアニメーション (4) CCTransitionJumpZoom, CCTransitionMoveIn*

はじめに

こんにちは、@hiro128_777です。
今回も、前回に引き続き Cocos Sharp の画面遷移の際のアニメーションについてご紹介します。

前回はCCTransitionFlipXCCTransitionFlipYのアニメーションをご紹介しました。
hiro128.hatenablog.jp

今回は CCTransitionJumpZoomCCTransitionMoveIn* をご紹介します。

CCTransitionJumpZoom は文字通り「画面がジャンプしながらズーム」します。

CCTransitionMoveIn* は * で示された方向、つまり B->Bottom, L->Left, R->Right, T->Top から遷移先の画面が現れます。

では、アニメーションを実際に見てみましょう。

画面遷移の際のアニメーション ~CCTransitionJumpZoom~

CCTransitionJumpZoom

f:id:hiro128:20170412205638g:plain

画面遷移の際のアニメーション ~CCTransitionMoveIn*~

CCTransitionMoveInB

f:id:hiro128:20170412205733g:plain

CCTransitionMoveInL

f:id:hiro128:20170412205810g:plain

CCTransitionMoveInR

f:id:hiro128:20170412205846g:plain

CCTransitionMoveInT

f:id:hiro128:20170412205929g:plain

というわけで、色々なアニメーションがあるので、ぜひ、色々試してみてください。

今回はここまでです。

Cocos Sharp 画面遷移のアニメーション (3) CCTransitionFlipX, CCTransitionFlipY

はじめに

こんにちは、@hiro128_777です。
今回も、前回に引き続き Cocos Sharp の画面遷移の際のアニメーションについてご紹介します。

前回はCCTransitionFlipAngularのアニメーションをご紹介しました。
hiro128.hatenablog.jp

今回はCCTransitionFlipXCCTransitionFlipYをご紹介します。

FlipX, FlipY はそれぞれ「X軸で裏返す」「Y軸で裏返す」と言う感じのアニメーションになります。

では、アニメーションを実際に見てみましょう。

画面遷移の際のアニメーション ~CCTransitionFlipX, CCTransitionFlipY~

CCTransitionFlipX (CCTransitionOrientation.LeftOver)

f:id:hiro128:20170328185121g:plain

CCTransitionFlipX (CCTransitionOrientation.RightOver)

f:id:hiro128:20170328185203g:plain

X軸で裏返すので、CCTransitionOrientation.DownOverCCTransitionOrientation.UpOverは意味がありません。
一応動作はしますがCCTransitionOrientation.LeftOverまたはCCTransitionOrientation.RightOverと同じ動作になり無意味です。

CCTransitionFlipY (CCTransitionOrientation.DownOver)

f:id:hiro128:20170328185345g:plain

CCTransitionFlipY (CCTransitionOrientation.UpOver)

f:id:hiro128:20170328185423g:plain

Y軸で裏返すので、CCTransitionOrientation.LeftOverCCTransitionOrientation.RightOverは意味がありません。
一応動作はしますがCCTransitionOrientation.DownOverまたはCCTransitionOrientation.UpOverと同じ動作になり無意味です。

というわけで、色々なアニメーションがありますので、皆さんも、色々試してみてください!

では、今回はここまでです。

Microsoft Most Valuable Professional Award を受賞いたしました。

こんにちは、@hiro128_777です。

この度、2017年3月に、Visual Studio and Development Technologies カテゴリーにて Microsoft Most Valuable Professional Award を受賞いたしました!!


正直、とても嬉しいです!!


身に余る光栄ですが、今後よりいっそう頑張っていきたいと決意を新たにしました。


そして、今回の受賞は私一人の力ではなく、支えてくださった大勢の方々の支援あってのことと痛感しております。このブログを読んでいただいたみなさま、JXUGのみなさま、MVPを目指したときに相談に乗って頂きました先輩MVPの方々、そして私の業務の負担を軽くするために協力頂いた職場のみなさま、家庭の時間を減らすことに協力してくれた妻、休日に遊ぶのを我慢してくれた息子、みなさまご支援本当にありがとうございました。


先輩MVPの方々と比べるとまだまだ未熟者ですが、よりいっそう精力的に活動していきたいと思います。


繰り返しになりますが、みなさま本当にありがとうございました。

Cocos Sharp 画面遷移のアニメーション (2) CCTransitionFlipAngular

はじめに

こんにちは、@hiro128_777です。
今回も、前回に引き続き Cocos Sharp の画面遷移の際のアニメーションについてご紹介します。

前回は Fade 系のアニメーションをご紹介しました。
hiro128.hatenablog.jp

今回は CCTransitionFlipAngular をご紹介します。

FlipAngular を日本語にすると「角度をつけて裏返す」と言う感じの意味になります。

では、アニメーションを実際に見てみましょう。

画面遷移の際のアニメーション ~CCTransitionFlipAngular~

CCTransitionFlipAngular (CCTransitionOrientation.DownOver)

f:id:hiro128:20170228185545g:plain

CCTransitionFlipAngular (CCTransitionOrientation.LeftOver)

f:id:hiro128:20170228185953g:plain

CCTransitionFlipAngular (CCTransitionOrientation.RightOver)

f:id:hiro128:20170228190044g:plain

CCTransitionFadeBL (CCTransitionOrientation.UpOver)

f:id:hiro128:20170228190125g:plain


というわけで、色々なアニメーションがあるので、ぜひ、色々試してみてください。

今回はここまでです。

Cocos Sharp 画面遷移のアニメーション (1) Fade 系

はじめに

こんにちは、@hiro128_777です。
今回は、Cocos Sharp 画面遷移の際のアニメーションについてご紹介します。

画面遷移の際のアニメーションは非常にたくさんの種類がありますが、今回はその中から Fade 系の効果をご紹介します。

画面遷移の際のアニメーション ~Fade 系~

CCTransitionFade

フェードアウト→いったん真っ暗になる→フェードイン

f:id:hiro128:20170221183321g:plain

CCTransitionCrossFade

フェードアウト→(次のシーンが重なりながら)フェードイン

f:id:hiro128:20170221183358g:plain

CCTransitionFadeTR

左下から右上(Top Right)へ分割された小さい正方形で切り替わる

f:id:hiro128:20170221183415g:plain

CCTransitionFadeBL

右上から左下(Bottom Left)へ分割された小さい正方形で切り替わる

f:id:hiro128:20170221183443g:plain

CCTransitionFadeUp

下から上へ横に分割された長方形で切り替わる

f:id:hiro128:20170221183515g:plain

CCTransitionFadeDown

上から下へ横に分割された長方形で切り替わる

f:id:hiro128:20170221183526g:plain



このほかにも色々なアニメーションがあるので、今後順次紹介していく予定です。

実際に使ってみるとなかなか面白いので、是非、色々試してみてください。

今回はここまでです。


次回は CCTransitionFlipAngular をご紹介しています。よろしければこちらもご覧下さい。
hiro128.hatenablog.jp