ওপেনজিএলে স্প্রিট অ্যানিমেশন


9

ওপেনজিএল ইএস-তে স্প্রিট অ্যানিমেশন প্রয়োগ করার ক্ষেত্রে আমি সমস্যার মুখোমুখি। আমি এটি গুগল করেছি এবং আমি যা পাচ্ছি তা হ'ল ক্যানভাসের মাধ্যমে টিউটোরিয়াল বাস্তবায়ন।

আমি উপায়টি জানি তবে এটি বাস্তবায়নে আমার সমস্যা হচ্ছে।

আমার যা প্রয়োজন: সংঘর্ষ শনাক্তকরণের জন্য একটি স্প্রিট অ্যানিমেশন।

আমি যা করেছি: সংঘটন সনাক্তকরণ ফাংশন সঠিকভাবে কাজ করছে।

PS: সবকিছু ঠিকঠাক চলছে তবে আমি কেবল ওপেনজিএল এ অ্যানিমেশনটি প্রয়োগ করতে চাই। ক্যানভাস আমার ক্ষেত্রে কাজ করবে না।

------------------------ সম্পাদনা -----------------------

আমার এখন একটি স্প্রিট শীট রয়েছে, নীচের অংশে কিছু নির্দিষ্ট সমন্বয় রয়েছে বলে বলুন তবে কোথা থেকে (ইউ, ভি) সমন্বয় শুরু হবে? আমার ইউ, ভি কো-অর্ডিনেটস (0,0) বা (0,5) এর থেকে বিবেচনা করা উচিত এবং কোন তালিকাতে সেগুলি আমার তালিকায় সংরক্ষণ করা উচিত ..? ----> বাম থেকে ডানে OR ----> উপরে থেকে নীচে

আমার স্প্রাইটস ক্লাসে আমার কি 2 ডি অ্যারে থাকা দরকার? আরও ভাল বোঝার জন্য এখানে চিত্রটি।

স্প্রাইট শীট আমি ধরে নিচ্ছি যে আমার কাছে একটি এনএক্সএন স্প্রাইট শীট রয়েছে, যেখানে এন = 3,4,5,6, .... ইত্যাদি রয়েছে।

class FragileSquare{

FloatBuffer fVertexBuffer, mTextureBuffer;

ByteBuffer mColorBuff;

ByteBuffer mIndexBuff;

int[] textures = new int[1];

public boolean beingHitFromBall = false;

int numberSprites = 49;

int columnInt = 7;      //number of columns as int

float columnFloat = 7.0f; //number of columns as float

float rowFloat = 7.0f;


public FragileSquare() {
    // TODO Auto-generated constructor stub

    float vertices [] = {-1.0f,1.0f,            //byte index 0
                         1.0f, 1.0f,            //byte index 1
                                    //byte index 2
                         -1.0f, -1.0f,
                         1.0f,-1.0f};           //byte index 3


    float textureCoord[] = {
                            0.0f,0.0f,
                            0.142f,0.0f,
                            0.0f,0.142f,
                            0.142f,0.142f           


    };


    byte indices[] = {0, 1, 2,
            1, 2, 3 };

    ByteBuffer byteBuffer = ByteBuffer.allocateDirect(4*2 * 4); // 4 vertices, 2 co-ordinates(x,y) 4 for converting in float
    byteBuffer.order(ByteOrder.nativeOrder());
    fVertexBuffer = byteBuffer.asFloatBuffer();
    fVertexBuffer.put(vertices);
    fVertexBuffer.position(0);

    ByteBuffer byteBuffer2 = ByteBuffer.allocateDirect(textureCoord.length * 4);
    byteBuffer2.order(ByteOrder.nativeOrder());
    mTextureBuffer =  byteBuffer2.asFloatBuffer();
    mTextureBuffer.put(textureCoord);
    mTextureBuffer.position(0);

}



public void draw(GL10 gl){


    gl.glFrontFace(GL11.GL_CW);

    gl.glEnableClientState(GL10.GL_VERTEX_ARRAY);
    gl.glVertexPointer(1,GL10.GL_FLOAT, 0, fVertexBuffer);
    gl.glEnable(GL10.GL_TEXTURE_2D);
    int idx = (int) ((System.currentTimeMillis()%(200*4))/200);
    gl.glMatrixMode(GL10.GL_TEXTURE); 
    gl.glTranslatef((idx%columnInt)/columnFloat, (idx/columnInt)/rowFloat, 0);
    gl.glMatrixMode(GL10.GL_MODELVIEW); 
    gl.glEnable(GL10.GL_BLEND);
    gl.glBlendFunc(GL10.GL_SRC_ALPHA, GL10.GL_ONE_MINUS_SRC_ALPHA);

    gl.glBindTexture(GL10.GL_TEXTURE_2D, textures[0]); //4
    gl.glTexCoordPointer(2, GL10.GL_FLOAT,0, mTextureBuffer); //5
    gl.glEnableClientState(GL10.GL_TEXTURE_COORD_ARRAY);
    gl.glDrawArrays(GL10.GL_TRIANGLE_STRIP, 0, 4); //7
    gl.glFrontFace(GL11.GL_CCW);
    gl.glDisableClientState(GL10.GL_VERTEX_ARRAY);
    gl.glDisableClientState(GL10.GL_TEXTURE_COORD_ARRAY);
    gl.glMatrixMode(GL10.GL_TEXTURE);
    gl.glLoadIdentity();
    gl.glMatrixMode(GL10.GL_MODELVIEW);
}

public void loadFragileTexture(GL10 gl, Context context, int resource)
{
    Bitmap bitmap = BitmapFactory.decodeResource(context.getResources(), resource);
    gl.glGenTextures(1, textures, 0);
    gl.glBindTexture(GL10.GL_TEXTURE_2D, textures[0]);
    gl.glTexParameterf(GL10.GL_TEXTURE_2D, GL10.GL_TEXTURE_MIN_FILTER, GL10.GL_LINEAR);
    gl.glTexParameterf(GL10.GL_TEXTURE_2D, GL10.GL_TEXTURE_MAG_FILTER, GL10.GL_LINEAR);
    gl.glTexParameterf(GL10.GL_TEXTURE_2D, GL10.GL_TEXTURE_WRAP_S, GL10.GL_REPEAT);
    gl.glTexParameterf(GL10.GL_TEXTURE_2D, GL10.GL_TEXTURE_WRAP_T, GL10.GL_REPEAT);
    GLUtils.texImage2D(GL10.GL_TEXTURE_2D, 0, bitmap, 0);
    bitmap.recycle();
}

}


1
স্প্রিট অ্যানিমেশন এবং সংঘর্ষ সনাক্তকরণের একে অপরের সাথে কোনও সম্পর্ক নেই।
এপিআই-বিস্ট

আপনি কোন ধরণের অ্যানিমেশন চান? কঙ্কাল, স্প্রাইট শীট, অন্য কিছু?
গেমডেভ-এআর

@ গেমডেভ-এর আমার কাছে স্প্রাইট শীট রয়েছে।
সিদ্ধার্থ-ভার্মা

1
@ মিঃ বিস্ট আমি জানি যে তাদের একে অপরের সাথে কোনও সম্পর্ক নেই। সংঘর্ষের পরে স্প্রাইট অ্যানিমেশন অর্জনের আমার লক্ষ্য। এখন অবধি আমি সংঘর্ষ সনাক্তকরণ অর্জন করতে সক্ষম হয়েছি। তবে যতদূর স্প্রাইট অ্যানিমেশন সম্পর্কিত, আমি এটি করতে অক্ষম। পিএস: আমি ওপেনজিএল ইএস করার জন্য একজন নবাগত এবং এখানেও .. আমার মন্তব্যের কোনওর জন্য দুঃখিত, যদি কোনও হয়।
সিদ্ধার্থ-ভার্মা

@ সিড কেন আপনার এক্স / ওয়াই মিশ্রিত হয়েছে? :( এক্স অনুভূমিক অক্ষ আছে (আমি জানি এটা মজ্জাগতভাবে নয় কিন্তু এটি একটি প্রচলিত রীতি যে এক বিরুদ্ধে যেতে উচিত)।
doppelgreener

উত্তর:


6

এটি একটি কোড স্নিপেট যা আমি আমার অ্যান্ড্রয়েড অ্যাপ্লিকেশনটিতে ব্যবহার করছি।

gl.glEnable(GL10.GL_TEXTURE_2D);
gl.glMatrixMode(GL10.GL_TEXTURE);    //edit the texture matrix
gl.glTranslatef(u, v, 0);            //translate the uv space (you can also rotate, scale, ...)
gl.glMatrixMode(GL10.GL_MODELVIEW);  //go back to the modelview matrix
gl.glBindTexture(GL10.GL_TEXTURE_2D, getTexture());
gl.glEnableClientState(GL10.GL_TEXTURE_COORD_ARRAY);           //map the texture on the triangles
gl.glTexCoordPointer(2, GL10.GL_FLOAT, 0, getTextureBuffer()); //load texture coordinates

এখানে কৌশলটি হ'ল glMatrixMode ব্যবহার করুন তারপরে glTranslatef ব্যবহার করুন। এটি আপনাকে ইউভি স্পেস অনুবাদ করার অনুমতি দেবে।

ইউভি স্থানাঙ্কগুলি (0,0) থেকে শুরু করে (1,1)

ধরা যাক আপনার 4 ফ্রেমযুক্ত স্কোয়ারযুক্ত টেক্সচার রয়েছে এবং আপনি একটি কোয়াড টেক্সচারাইজ করতে চান। আমি ইউভি স্পেসে ফ্রেমগুলি সংজ্ঞায়িত করতে নিম্নলিখিত স্থানাঙ্কগুলি ব্যবহার করব (পছন্দটি আপনার উপর নির্ভর করে)

1 ম (0, 0) (0.5, 0.5)

২ য় (০.৫, ০)

তৃতীয় (0, 0.5) (0.5, 1)

চতুর্থ (০.৫, ০.০) (১, ১)

GlTexCoordPointer এর সাথে আপনার কোয়াডের 1 ম ফ্রেমটি মানচিত্র করা উচিত তারপর যখন আপনি 2 য় ফ্রেম দেখাতে চান তখন আপনি তৃতীয়টির জন্য glTranslatef (0.5, 0, 0), glTranslatef (0, 0.5, 0) কল করুন এবং glTranslatef (0.5, 0.5, 0) ) 4 র্থ জন্য।

উপরের কোডটি পরীক্ষা করা হয়েছে এবং খুব ভালভাবে কাজ করে, আমি আশা করি উদাহরণটি যথেষ্ট পরিষ্কার।


সম্পাদনা করুন:

আপনার অঙ্কন ফাংশন শেষে আপনার এই টেক্সট ম্যাট্রিক্সটি পুনরায় সেট করা উচিত it

gl.glDisableClientState(GL10.GL_TEXTURE_COORD_ARRAY);
gl.glMatrixMode(GL10.GL_TEXTURE);
gl.glLoadIdentity();
gl.glMatrixMode(GL10.GL_MODELVIEW);

ঠিক আছে, উদাহরণ হিসাবে 5 টি সারি এবং 4 কলাম নেওয়া যাক। আপনার স্প্রিটসেটে সর্বাধিক 20 স্প্রাইট রয়েছে তাই ইন্ট আইডিএক্স = (ইনট) ((সিস্টেম.কন্ট্রেন্টটাইমমিলিস ()% 200 * সংখ্যা_ফ_স্প্রিটস)) / 200) ব্যবহার করুন;

আইডিএক্স এখন 0 থেকে সংখ্যা_ও_প্রিট -1 এ চলে যায় (যদি আপনার কাছে উদাহরণ হিসাবে 5 টি সারি, 4 কলাম তবে কেবল 18 স্প্রাইট থাকে তবে <20 হতে পারে) এর প্রতি 200ms -এর মান পরিবর্তন করা। ধরে নিচ্ছি আপনার স্প্রিটটি বাম থেকে ডান এবং নীচে থেকে নীচে পর্যন্ত আপনি আপনার ফ্রেমটি ইউভি স্পেসে এটি করছে এমনটি দেখতে পাচ্ছেন।

int c = 4;      //number of columns as int
float cf = 4.f; //number of columns as float
float rf = 5.f; //number of rows as float
gl.glTranslatef((idx%c)/cf, (idx/c)/rf, 0);

আপনি যখন আইডেক্স% সি করেন তখন আপনার কলাম সূচীটি পাওয়া যায়, ফলাফলগুলি সর্বদা 0 এবং c-1 এর মধ্যে থাকে

আইডিএক্স% সি একটি পূর্ণসংখ্যা, আপনাকে এটি 0.0 এবং 1.0 এর মধ্যে একটি মানকে স্কেল করতে হবে যাতে আপনি সিএফ দ্বারা বিভাজক হন, সিএফ একটি ভাসমান তাই এখানে একটি নিখুঁত castালাই রয়েছে

আইডিএক্স / সি একই জিনিস তবে সারিগুলির জন্য, আইডিএক্স এবং সি উভয়ই পূর্ণসংখ্যার ফলে ফলাফলটি এখনও পূর্ণসংখ্যা হয় এবং এটি সারি সূচক, আরএফ দ্বারা বিভক্ত হয়ে আপনি 0.0 এবং 1.0 এর মধ্যে একটি মান পান


আমি এখানে একটি ত্রিভুজ স্ট্রিপ ব্যবহার করছি। তাহলে কি এই ক্ষেত্রে কাজ করবে?
সিদ্ধার্থ-ভার্মা

আরও একটি বিষয় .. আমি কো-অর্ডিনেটগুলিকে কোন পদ্ধতিতে সঞ্চয় করব? ----> 1 ডি অ্যারে ----> 2 ডি অ্যারে? যদি 1 ডি হয়, তবে অ্যারেতে আমার সমস্ত সমন্বয়গুলি কী বিবেচনা করা উচিত?
সিদ্ধার্থ-ভার্মা

@ সিড হ্যাঁ, এটি একই জিনিস, আপনার কেবল সঠিক ইউভি ম্যাপিং স্থানাঙ্কগুলি ব্যবহার করা উচিত। আপনার কোড পোস্ট করার জন্য যদি আপনাকে আরও সহায়তার প্রয়োজন হয় তার চেয়ে আমার কোড স্নিপেট মানিয়ে নেওয়ার চেষ্টা করুন
মার্কো মার্টিনেল্লি

GMTexCoordPointer এর জন্য @ সিড ইউভি স্থানাঙ্কগুলি 1 ডি অ্যারেতে সংরক্ষণ করা দরকার
মার্কো মার্টিনেল্লি

1
আমি জানি না যে 1 ম সমস্যাটির জন্য, এটি এখানে ঠিকঠাক কাজ করছে, দ্বিতীয়টির জন্য, আপনাকে আইডেক্স বন্ধ করতে হবে 0 এ ফিরে যেতে যাতে সাধারণ কৌশলটি এটি। এর int oldIdx;আগে public FragileSquare()ড্র পদ্ধতিতে একটি ভেরিয়েবল ঘোষণা করুন এটি করুন: int idx = oldIdx==(numberSprites-1) ? (numberSprites-1) : (int)((System.currentTimeMillis()%(200*numberSprites))/200); oldIdx = idx; যেভাবে আমি মনে করি যে আমরা ওটি যাচ্ছি, আসল প্রশ্নের উত্তর দেওয়া হয়েছিল, সম্ভবত আপনার এটি বন্ধ করা উচিত এবং প্রয়োজনে একটি নতুন খোলার উচিত।
মার্কো মার্তিনেলেলি

1

আমার পরামর্শ: আপনার অ্যানিমেশনের সমস্ত ফ্রেমযুক্ত পাশাপাশি টেক্সচার তৈরি করুন (পাশাপাশি)। আপনি যে ফ্রেমটি প্রদর্শন করতে চান তা অনুসারে টেক্সচার সমন্বয়গুলি পরিবর্তন করুন।


এর অর্ধেক কাজ হয়ে গেছে। তবে কীভাবে এই অংশটি অর্জন করব ...... "আপনি যে ফ্রেমটি প্রদর্শন করতে চান তা অনুসারে টেক্সচারের স্থানাঙ্ক পরিবর্তন করুন Change" PS: আমি ওপেনজিএল ইএসের এক নবাগত।
সিদ্ধার্থ-ভার্মা

1

আপনার একটি স্প্রিটশিট নামক কিছু ব্যবহার করতে হবে ।

এখানে চিত্র বর্ণনা লিখুন

একটি স্প্রিটশিট হ'ল সমস্ত আলাদা আলাদা "ফ্রেম" সহ একক চিত্র যা দেখায় যে চরিত্রটি নিতে পারে। সময় অনুযায়ী (বিস্ফোরণ অ্যানিমেশন হিসাবে) বা প্লেয়ার ইনপুট (যেমন বাম দিকে, ডানদিকের, বা বন্দুক আঁকানো) ভিত্তিতে প্রদর্শিত স্প্রেট শীটের কোন "ফ্রেম" নির্বাচন করুন

সবচেয়ে সহজ পদ্ধিতি হল ভালো কিছু করতে পথ সব সংশ্লিষ্ট sprites একই আকার (একই প্রস্থ ও উচ্চতা), এবং পেয়ে (প) বাম দিক থেকে 4 র্থ পরী এর তুল্য তাই হতে থাকতে হয় ঠিক হয় (sprite_width*4.0 / sprite_sheet_width)

আপনি যদি স্থানটি দক্ষ করে তুলতে এবং অনুকূল করার চেষ্টা করছেন তবে আপনি আপনার স্প্রিটকে একক শীটে প্যাক করতে টেক্সচারপ্যাকারের মতো একটি সরঞ্জাম ব্যবহার করতে পারেন । টেক্সচারপ্যাকার জসন বা এক্সএমএল ডেটাও নির্গত করে যা আপনার দ্বারা লোড হওয়া প্রতিটি স্প্রাইটের xy অবস্থানগুলি বর্ণনা করে।


আমার কাছে ইতিমধ্যে একটি স্প্রাইট শীট রয়েছে। আমি পদ্ধতিটি জানি, এর সমন্বয়গুলি স্থানান্তরিত করে। তবে আমার মূল প্রশ্নটি "এটি কীভাবে অর্জন করবেন ওপেনজিএল ইএস?" এর জন্য আপনার কোনও সিউডো-কোড বা জাভা কোড রয়েছে? অ্যালগরিদম আমার জন্য কাজ করতে পারে।
সিদ্ধার্থ-ভার্মা

2
একটি Spriteক্লাস লিখুন । Spriteক্লাস পার্কের ভিতরে (ইউ, ভি) জোড়গুলির একটি তালিকা রয়েছে যা জমিনের প্রতিটি "স্থির" এর স্থানাঙ্ককে বর্ণনা করে। সময় ট্র্যাক করার জন্য আপনার আরও 2 ভেরিয়েবলের দরকার: "ফ্রেম প্রতি সেকেন্ড" (প্রতিটি অ্যানিমেশন ফ্রেমে ব্যয় করতে # সেকেন্ড) সংরক্ষণ করার জন্য একটি ফ্লোট এবং অন্যটি "ক্লক" নামে ভাসমান, যা অ্যানিমেশন চক্রের "বর্তমান সময়" সঞ্চয় করে। আপনি যখন আঁকতে যান, আপনাকে অবশ্যই বর্তমান সময়টি আপডেট করতে হবে। "প্রতি ফ্রেমে প্রতি সেকেন্ড" ছাড়িয়ে গেলে আপনি অ্যানিমেশনের পরবর্তী ফ্রেমে চলে যান, যাতে অ্যানিমেশনটি এগিয়ে যায়।
bobobobo

ঠিক আছে, সুতরাং (ইউ, ভি) জোড়া যুক্ত তালিকার একটি 2 ডি অ্যারে হবে?
সিদ্ধার্থ-ভার্মা

সম্পাদিত প্রশ্ন দেখুন।
সিদ্ধার্থ-ভার্মা

1

আপনি ওপেনজিএল সহ আই_কোলডিড ব্যবহার করতে পারেন ।

বিশ্বের প্রতিটি সত্তাকে একটি বাক্স বানান, তারপরে বাক্সের প্রতিটি অক্ষটি অন্য সত্তার সাথে সংঘর্ষে রয়েছে কিনা তা পরীক্ষা করুন।

সংঘর্ষের জন্য পরীক্ষার জন্য প্রচুর পরিমাণে সত্তা সহ আপনি অষ্টমীতে পরীক্ষা করতে চাইতে পারেন। আপনি বিশ্বেরকে সেক্টরে বিভক্ত করে তুলবেন, তারপরে কেবল একই সেক্টরের বস্তুর মধ্যে সংঘর্ষের জন্য পরীক্ষা করুন check

বুলেট ডায়নামিক্স ইঞ্জিন ব্যবহার করুন যা ওপেন সোর্স সংঘর্ষ সনাক্তকরণ এবং পদার্থবিজ্ঞান ইঞ্জিন।


সংঘর্ষ সনাক্তকরণ ইতিমধ্যে অর্জিত হয়েছে। আমার উদ্দেশ্য স্প্রিট অ্যানিমেশন তৈরি করা।
সিদ্ধার্থ-ভার্মা
আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.