cocos2d中的anchorPoint

Jun 07, 2016 pm 03:25 PM
写真 場所

将该图片放置到屏幕左下方 CCSprite sprite = CCSprite.sprite( Default.png ); addChild(sprite); 生成的精灵放置在(0,0),也就是屏幕左下角。但是精灵的贴图的中心点和精灵的左下角位置一致,导致贴图只能显示一部分(贴图的右边上半部分)。 可以这样想

cocos2d中的anchorPoint

将该图片放置到屏幕左下方

CCSprite sprite = CCSprite.sprite(<span>"</span><span>Default.png</span><span>"</span>);  
addChild(sprite);  
ログイン後にコピー

生成的精灵放置在( 0,0 ),也就是屏幕左下角。但是精灵的贴图的中心点和精灵的左下角位置一致 ,导致贴图只能显示一部分(贴图的右边上半部分)。

cocos2d中的anchorPoint

可以这样想,一个精灵有两部分,一部分是节点背景对象 ,另一部分是贴图对象 (自己理解定义的名称,非官方)

 

怎么可以让贴图完全显示出来呢?使用定位点

 

每个节点都有一个定位点,但是只有当节点拥有贴图时,这个定位点才有用。默认情况下, anchorPoint 属性设置为(0.5,0.5 )

 

定位点和节点的位置没有关系。当改变 anchorPoint 属性的时候,我们能看到精灵在屏幕上的位置发生了变化,但是其实节点没有改变;改变的是精灵里贴图的位置

cocos2d中的anchorPoint

CCSprite sprite = CCSprite.sprite(<span>"</span><span>Default.png</span><span>"</span>);  
sprite.setScale(<span>0.6f</span>);  
sprite.setPosition(CGPoint.make(<span>500</span>, <span>300</span>));  
addChild(sprite);  
              
ccMacros.CCLOGERROR(<span>"</span><span>test</span><span>"</span>, <span>"</span><span>Position:</span><span>"</span>+sprite.getPosition().x +<span>"</span><span>--</span><span>"</span>+sprite.getPosition().y);  
ccMacros.CCLOGERROR(<span>"</span><span>test</span><span>"</span>, <span>"</span><span>AnchorPoint:</span><span>"</span>+sprite.getAnchorPoint().x +<span>"</span><span>--</span><span>"</span>+sprite.getAnchorPoint().y);  
ccMacros.CCLOGERROR(<span>"</span><span>test</span><span>"</span>, <span>"</span><span>AnchorPointInPixels:</span><span>"</span>+sprite.getAnchorPointInPixels().x+<span>"</span><span>--</span><span>"</span>+sprite.getAnchorPointInPixels().y);  
ログイン後にコピー

cocos2d中的anchorPoint

cocos2d中的anchorPoint

cocos2d中的anchorPoint

修改定位点为0

CCSprite sprite = CCSprite.sprite(<span>"</span><span>Default.png</span><span>"</span>);  
sprite.setScale(<span>0.6f</span>);  
sprite.setPosition(CGPoint.make(<span>500</span>, <span>300</span>));  
sprite.setAnchorPoint(CGPoint.make(<span>0</span>, <span>0</span>));  
addChild(sprite);  
ログイン後にコピー

cocos2d中的anchorPoint

cocos2d中的anchorPoint

从上面可以看出来精灵的位置没有发生变化,发生变化的只是贴图对象 相对于节点背景对象 的偏移 。

默认情况下 anchorPoint 为( 0.5,0.5 ),即贴图对象 的中心位置对应着节点背景对象 的左下角;而当 anchorPoint 为(0,0 ),即贴图对象 的左下角对应着节点背景对象 的左下角

 

所以按照下面的代码,图片就可以正好显示在左下角了

CCSprite sprite = CCSprite.sprite(<span>"</span><span>Default.png</span><span>"</span>);  
sprite.setAnchorPoint(CGPoint.make(<span>0</span>, <span>0</span>));  
addChild(sprite);  
ログイン後にコピー

cocos2d中的anchorPoint

 

附:AnchorPoint问题:

设置AnchorPoint,到底有什么作用,当初我的理解是这个AnchorPoint是相对本身位置参考点。 
比如:我定义个Sprite,设置一个anchorPoint为居中置顶的位置 。
           sprite.anchorPoint = ccp( intW / 2, intH );
           sprite.rotation  = 90;
但实际翻转时还是以左下角为参考点翻转。更改的参考点并不起作用,或者我理解错误。
问题:

1:想实现我这个更改翻转的参考点,如何实现?;
2:AnchorPoint到底做什么用?



答:这个属性表示你这个图片setPosition时的点在图片上所处的位置.
取值范围0-1
0,0表示左下角,
1,1表示右上角
0.5,0.5表示图片的中心点.

所有的图片都是以矩形来界定的.



问:这样设置翻转时还是以左下角为参考点


答:在设置 anchorPoint 的时候,   
imageVIew = [[UIImageView alloc] init];
imageView.anchorPoint = ccp(0.5, 1);
imageView.frame = CGRectMake(.......);

好像是先设置 anchorPoint, 再设置 frame.  试试.



答:问题算是解决了。说说基本思路。 
我之前定义一个Sprite,初始化时用一个ColorLayer 填充精灵 代码如下: 
+ (id) BulletWithinLayer:(CCLayer *) layer 

    BQBullet *bullet = [BQBullet node]; 
     
    //bullet.anchorPoint = ccp(0.5,1);///注释A 
    [bullet SetLayer:layer]; 
     
    return bullet; 


-(id)init 


    if((self == [super init])) 
    { 
        CCColorLayer *tmp = [CCColorLayer layerWithColor:ccc4(255, 255, 0, 255)]; 
        //tmp.anchorPoint = ccp(0.5,1);  ///注释B 
        [self addChild:tmp z:0 tag:1]; 
    } 
    return self; 


//生成一个bullet精灵 
BQBullet *bullet = [BulletWithinLayer:layer]; 
bullet.anchorPoint= ccp(0.5,1); 
bullet.rotation= 45; 
[layer addChild: bullet z:1]; 

这时看到的翻转还是已左下角,关闭注释A,B都是无效。 

后面我用一个图片代替ColorLayer生成精灵,就有效果了。 

为什么会有这种区别呢?更填充的层有关系吗?真是没搞懂啊?虽然说最后游戏不是这种写法,但对程序员来说,在没有图的情况下应该也能完成一个游戏,就是用单纯的色块来替换,这样就不用等美术图出来了,也能更早的出模型,至少以前在J2ME上都是可以这样做的,现在在iphone上,画个色块就TMD的这么麻烦,真是很不爽! 



针对:色块无法翻转的问题找到了,因为色块是ColorLayer,CCLayer默认的isRelativeAnchorPoint = NO;重新打开就行了isRelativeAnchorPoint = YES;


このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

ホットAIツール

Undresser.AI Undress

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

Undress AI Tool

脱衣画像を無料で

Clothoff.io

Clothoff.io

AI衣類リムーバー

AI Hentai Generator

AI Hentai Generator

AIヘンタイを無料で生成します。

ホットツール

メモ帳++7.3.1

メモ帳++7.3.1

使いやすく無料のコードエディター

SublimeText3 中国語版

SublimeText3 中国語版

中国語版、とても使いやすい

ゼンドスタジオ 13.0.1

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

ドリームウィーバー CS6

ドリームウィーバー CS6

ビジュアル Web 開発ツール

SublimeText3 Mac版

SublimeText3 Mac版

神レベルのコード編集ソフト(SublimeText3)

小紅書で公開するときに写真が自動的に保存される問題を解決するにはどうすればよいですか?投稿時に自動保存された画像はどこにありますか? 小紅書で公開するときに写真が自動的に保存される問題を解決するにはどうすればよいですか?投稿時に自動保存された画像はどこにありますか? Mar 22, 2024 am 08:06 AM

ソーシャルメディアの継続的な発展に伴い、Xiaohongshu はますます多くの若者が自分たちの生活を共有し、美しいものを発見するためのプラットフォームとなっています。多くのユーザーは、画像を投稿する際の自動保存の問題に悩まされています。では、この問題をどうやって解決すればよいでしょうか? 1.小紅書で公開するときに写真が自動的に保存される問題を解決するにはどうすればよいですか? 1. キャッシュをクリアする まず、Xiaohongshu のキャッシュ データをクリアしてみます。手順は次のとおりです: (1) 小紅書を開いて右下隅の「マイ」ボタンをクリックします。 (2) 個人センター ページで「設定」を見つけてクリックします。 (3) 下にスクロールして「」を見つけます。 「キャッシュをクリア」オプションを選択し、「OK」をクリックします。キャッシュをクリアした後、Xiaohongshu を再起動し、写真を投稿して、自動保存の問題が解決されるかどうかを確認します。 2. 小紅書バージョンを更新して、小紅書が正しく動作することを確認します。

TikTokのコメントに写真を投稿するにはどうすればよいですか?コメント欄の写真への入り口はどこですか? TikTokのコメントに写真を投稿するにはどうすればよいですか?コメント欄の写真への入り口はどこですか? Mar 21, 2024 pm 09:12 PM

Douyin のショートビデオの人気により、コメント エリアでのユーザーのやり取りがより多彩になりました。ユーザーの中には、自分の意見や感情をよりよく表現するために、コメントで画像を共有したいと考えている人もいます。では、TikTokのコメントに写真を投稿するにはどうすればよいでしょうか?この記事では、この質問に詳しく答え、関連するヒントと注意事項をいくつか紹介します。 1.Douyinのコメントに写真を投稿するにはどうすればよいですか? 1. Douyinを開く: まず、Douyin APPを開いてアカウントにログインする必要があります。 2. コメントエリアを見つける:短いビデオを閲覧または投稿するときに、コメントしたい場所を見つけて「コメント」ボタンをクリックします。 3. コメントの内容を入力します: コメント領域にコメントの内容を入力します。 4. 写真の送信を選択します。コメント内容を入力するインターフェースに「写真」ボタンまたは「+」ボタンが表示されます。

iPhone で写真をより鮮明にする 6 つの方法 iPhone で写真をより鮮明にする 6 つの方法 Mar 04, 2024 pm 06:25 PM

Apple の最近の iPhone は、鮮明なディテール、彩度、明るさで思い出を捉えます。ただし、場合によっては、画像が鮮明に見えなくなる問題が発生することがあります。 iPhone カメラのオートフォーカスは大きく進歩し、写真をすばやく撮影できるようになりましたが、状況によってはカメラが誤って間違った被写体に焦点を合わせ、不要な領域で写真がぼやけてしまうことがあります。 iPhone 上の写真の焦点が合っていない場合、または全体的に鮮明さが欠けている場合は、次の投稿を参照して写真を鮮明にすることができます。 iPhone で写真を鮮明にする方法 [6 つの方法] ネイティブの写真アプリを使用して写真をクリーンアップしてみることができます。さらに多くの機能やオプションが必要な場合

PPT画像を1枚ずつ表示させる方法 PPT画像を1枚ずつ表示させる方法 Mar 25, 2024 pm 04:00 PM

PowerPoint では、画像を 1 枚ずつ表示するのが一般的な手法ですが、これはアニメーション効果を設定することで実現できます。このガイドでは、基本的なセットアップ、画像の挿入、アニメーションの追加、アニメーションの順序とタイミングの調整など、この手法を実装する手順について詳しく説明します。さらに、トリガーの使用、アニメーションの速度と順序の調整、アニメーション効果のプレビューなど、高度な設定と調整が提供されます。これらの手順とヒントに従うことで、ユーザーは PowerPoint で次々に表示される画像を簡単に設定できるため、プレゼンテーションの視覚的な効果が高まり、聴衆の注意を引くことができます。

Web ページ上の画像を読み込めない場合はどうすればよいですか? 6つのソリューション Web ページ上の画像を読み込めない場合はどうすればよいですか? 6つのソリューション Mar 15, 2024 am 10:30 AM

一部のネチズンは、ブラウザの Web ページを開いたときに、Web ページ上の画像が長時間読み込めないことに気づきました。何が起こったのでしょうか?ネットワークは正常であることを確認しましたが、どこに問題があるのでしょうか?以下のエディタでは、Web ページの画像が読み込めない問題に対する 6 つの解決策を紹介します。 Web ページの画像を読み込めない: 1. インターネット速度の問題 Web ページに画像が表示されません。これは、コンピュータのインターネット速度が比較的遅く、コンピュータ上で開いているソフトウェアが多いためと考えられます。また、アクセスする画像が比較的大きいため、読み込みタイムアウトが原因である可能性があります。その結果、画像が表示されません。ネットワーク速度をより多く消費するソフトウェアをオフにすることができます。タスク マネージャーに移動して確認できます。 2. 訪問者が多すぎる Web ページに写真が表示されない場合は、訪問した Web ページが同時に訪問されたことが原因である可能性があります。

HTML、CSS、jQuery を使用して画像の結合と表示の高度な機能を実装する方法 HTML、CSS、jQuery を使用して画像の結合と表示の高度な機能を実装する方法 Oct 27, 2023 pm 04:36 PM

HTML、CSS、jQuery を使用して画像結合表示を実装する方法の高度な機能の概要: Web デザインにおいて、画像表示は重要なリンクであり、画像結合表示はページの読み込み速度を向上させ、ユーザー エクスペリエンスを向上させるための一般的な手法の 1 つです。この記事では、HTML、CSS、jQuery を使用して画像の結合と表示の高度な機能を実装する方法と、具体的なコード例を紹介します。 1. HTML レイアウト: まず、結合された画像を表示するコンテナを HTML で作成する必要があります。ディを使用できます

Foxit PDF Reader で PDF ドキュメントを jpg 画像に変換する方法 - Foxit PDF Reader で PDF ドキュメントを jpg 画像に変換する方法 Foxit PDF Reader で PDF ドキュメントを jpg 画像に変換する方法 - Foxit PDF Reader で PDF ドキュメントを jpg 画像に変換する方法 Mar 04, 2024 pm 05:49 PM

Foxit PDF Reader ソフトウェアも使用していますか? Foxit PDF Reader が PDF ドキュメントを jpg 画像に変換する方法をご存知ですか? 次の記事では、Foxit PDF Reader が PDF ドキュメントを jpg 画像に変換する方法について説明します。 jpg画像は以下からご覧ください。まずFoxit PDF Readerを起動し、上部のツールバーで「機能」を見つけ、「PDF to Others」機能を選択します。次に、「Foxit PDF Online Conversion」というWebページを開きます。ページ右上の「ログイン」ボタンをクリックしてログインし、「PDF to Image」機能をオンにしてください。次にアップロードボタンをクリックし、画像に変換したいPDFファイルを追加し、追加後「変換開始」をクリックします。

JavaScript を使用して画像のドラッグとズーム機能を実装するにはどうすればよいですか? JavaScript を使用して画像のドラッグとズーム機能を実装するにはどうすればよいですか? Oct 27, 2023 am 09:39 AM

JavaScript を使用して画像のドラッグとズーム機能を実装するにはどうすればよいですか?最新の Web 開発では、画像のドラッグとズームは一般的な要件です。 JavaScript を使用すると、画像にドラッグやズーム機能を簡単に追加して、より良いユーザー エクスペリエンスを提供できます。この記事では、JavaScriptを使用してこの機能を実装する方法を、具体的なコード例とともに紹介します。 HTML 構造 まず、画像を表示したり追加したりするための基本的な HTML 構造が必要です。

See all articles