পাইগমে একটি এসএনইএস মোড 7 (অ্যাফাইন ট্রান্সফর্ম) প্রভাব করা

Question

পিগেমে মোড 7 / মারিও কার্ট টাইপ এফেক্ট কীভাবে করবেন তার সংক্ষিপ্ত উত্তর হিসাবে কি এমন কিছু আছে?

আমি ব্যাপকভাবে গুগল করেছি, আমি যে সমস্ত ডকগুলি নিয়ে আসতে পারি সেগুলি হ'ল প্রচুর অদ্ভুত চেহারা সমীকরণ এবং অন্যান্য সহ অন্যান্য ভাষায় (asm, c) কয়েক ডজন পৃষ্ঠা।

আদর্শভাবে, আমি গাণিতিক শর্তগুলির চেয়ে ইংরাজীতে আরও কিছু ব্যাখ্যা করা সন্ধান করতে চাই।

আমি ইমেজ / টেক্সচার, বা অন্য যে কোনও জিনিস প্রয়োজন তা কাজে লাগাতে পিআইএল বা পাইগেম ব্যবহার করতে পারি।

আমি পিগেমে 7 মোডের ইফেক্টটি অর্জন করতে চাই তবে আমার বুদ্ধিমানের সমাপ্তি আমার কাছে মনে হয়। সাহায্যের প্রশংসা করা হবে। আপনি যে কোনও এবং সমস্ত সংস্থান বা ব্যাখ্যা সরবরাহ করতে পারেন তা চমত্কার হবে, এমনকি যদি সেগুলি আমি চাই তার চেয়ে সহজ নাও হয়।

যদি আমি এটি বের করতে পারি, তবে আমি newbies পৃষ্ঠার জন্য 7 মোডটি কীভাবে করব তা সম্পর্কে একটি নির্দিষ্ট লিখব write

সম্পাদনা করুন: মোড 7 ডক: http://www.coranac.com/tonc/text/mode7.htm

Comments

এখানে সমীকরণগুলি রয়েছে বলে মনে হয়: en.wikedia.org/wiki/Mode_7 যদিও আজকাল আমাদের 3 ডি ত্বরণ রয়েছে, মোড things এর মতো জিনিস বা ডুম ডুমের মতো কাজগুলি সমাধানের চেয়ে কৌতূহল বেশি।

— সালমনমুজ 4'12

@ 2D_Guy এই পৃষ্ঠাটি আমার জন্য খুব ভালভাবে অ্যালগরিদম ব্যাখ্যা করে। আপনি এটি কীভাবে করবেন তা জানতে চান, বা আপনি এটি ইতিমধ্যে আপনার জন্য বাস্তবায়ন করতে চান?

— গুস্তাভো ম্যাকিয়েল

@ স্টেফেল্টন এসএনইএস সিস্টেমে একমাত্র স্তরটি বিকৃত, ঘোরানো হতে পারে .. (ম্যাট্রিকের সাথে অ্যাফাইন ট্রান্সফরমেশন প্রয়োগ করা) সপ্তম স্তর। পটভূমি স্তর। অন্যান্য সমস্ত স্তরগুলি সাধারণ স্প্রাইটে ব্যবহৃত হত, সুতরাং আপনি যদি 3D প্রভাব চাইতেন তবে আপনাকে এই স্তরটি ব্যবহার করতে হবে, নামটি এখান থেকে এসেছে :)

— গুস্তাভো ম্যাকিয়েল

@ গুস্তাভো ম্যাসিয়েল: এটি কিছুটা ভুল। এসএনইএসের 8 টি বিভিন্ন মোড (0-7) ছিল, যার মধ্যে 4 টি পর্যন্ত ব্যাকগ্রাউন্ড স্তরগুলির বিভিন্ন কার্যকারিতা ছিল, তবে কেবলমাত্র একটি মোড (মোড 7, তাই নাম) সমর্থন করে ঘূর্ণন এবং স্কেলিং (এবং আপনাকে একটি একক স্তরে সীমাবদ্ধও করে)। আপনি মোডগুলি সত্যিই একত্রিত করতে পারেন নি।

— মাইকেল ম্যাডসেন

@ মিশেল: আমি আরও যোগ করব: 90 এর দশকে (গেম এফ-জিরো সহ) এই প্রভাবটি ব্যবহার করার জন্য প্রথম জনপ্রিয় কনসোলগুলির মধ্যে এসএনইএস অন্যতম ছিল এবং সে কারণেই লোকেরা সমস্ত 2 ডি অনুভূমিক টেক্সচার-ম্যাপযুক্ত বিমানের প্রভাবগুলি দেখা শুরু করে "মোড 7" হিসাবে গেমস। বাস্তবে, আরকেড, সিএফ-এ এই ধরণের প্রভাব দীর্ঘকাল আগে নতুন ছিল না এবং বিদ্যমান ছিল was স্পেস হ্যারিয়ার / হ্যাং-অন (1985)।

— টাইগার্ল

Answer 1

মোড 7 একটি খুব সাধারণ প্রভাব। এটি কিছু তল / ছাদে 2 ডি x / y টেক্সচার (বা টাইলস) প্রজেক্ট করে। পুরানো এসএনইএস এটি করার জন্য হার্ডওয়্যার ব্যবহার করে, তবে আধুনিক কম্পিউটারগুলি এতটাই শক্তিশালী যে আপনি এই রিয়েলটাইমটি করতে পারেন (এবং আপনার উল্লেখ অনুযায়ী এএসএমের প্রয়োজন নেই)।

3 ডি পয়েন্ট (x, y, z) কে 2 ডি পয়েন্ট (x, y) তে প্রজেক্ট করার জন্য বেসিক 3 ডি গণিত সূত্রটি হ'ল:

x' = x / z;
y' = y / z; 

আপনি যখন এটি সম্পর্কে ভাবেন তখন তা বোধগম্য হয়। দূরবর্তী স্থানে থাকা অবজেক্টগুলি আপনার কাছের বস্তুর চেয়ে ছোট। কোথাও যাওয়ার রেলপথ ট্র্যাকগুলি সম্পর্কে ভাবুন:

যদি আমরা সূত্র ইনপুট মানগুলিতে ফিরে তাকাই: xএবং yআমরা যে পিক্সেলটি প্রক্রিয়া করছি zতা হবে এবং পয়েন্টটি কতটা দূরত্ব সম্পর্কে তথ্য হবে information কী zহওয়া উচিত তা বুঝতে , ছবিটি দেখুন, এটি zউপরের চিত্রটির জন্য মানগুলি দেখায় :

বেগুনি = কাছাকাছি দূরত্ব, লাল = খুব দূরে

সুতরাং এই উদাহরণে, zমান হ'ল y - horizon(ধরে (x:0, y:0)নেওয়া পর্দার কেন্দ্রে রয়েছে)

আমরা যদি সবকিছু একসাথে রাখি তবে তা হয়ে যায়: (সিউডোকোড)

for (y = -yres/2 ; y < yres/2 ; y++)
  for (x = -xres/2 ; x < xres/2 ; x++)
  {
     horizon = 20; //adjust if needed
     fov = 200; 

     px = x;
     py = fov; 
     pz = y + horizon;      

     //projection 
     sx = px / pz;
     sy = py / pz; 

     scaling = 100; //adjust if needed, depends of texture size
     color = get2DTexture(sx * scaling, sy * scaling);  

     //put (color) at (x, y) on screen
     ...
  }

একটি শেষ কথা: আপনি যদি মারিও কার্ট গেম করতে চান তবে আমি মনে করি আপনিও মানচিত্রটি ঘোরান। ভাল এটি খুব সহজ: টেক্সচারের মান পাওয়ার আগে sxএবং ঘোরান sy। সূত্রটি এখানে:

  x' = x * cos(angle) - y * sin(angle);
  y' = x * sin(angle) + y * cos(angle);

এবং যদি আপনি মানচিত্রটি ট্রাফটি সরিয়ে নিতে চান তবে টেক্সচারের মান পাওয়ার আগে কিছু অফসেট যুক্ত করুন:

  get2DTexture(sx * scaling + xOffset, sy * scaling + yOffset);

দ্রষ্টব্য: আমি অ্যালগরিদম পরীক্ষা করেছি (প্রায় অনুলিপি-পেস্ট) এবং এটি কার্যকর হয়। এখানে উদাহরণটি রয়েছে: http://glslsandbox.com/e#26532.3 (সাম্প্রতিক ব্রাউজার এবং ওয়েবজিএল সক্ষম হওয়া প্রয়োজন)

দ্রষ্টব্য: আমি সাধারণ গণিত ব্যবহার করি কারণ আপনি বলেছিলেন যে আপনি কিছু সহজ চান (এবং ভেক্টর গণিতের সাথে পরিচিত মনে হয় না)। আপনি উইকিপিডিয়া সূত্র বা আপনার দেওয়া টিউটোরিয়াল ব্যবহার করে একই জিনিস অর্জন করতে পারেন। তারা যেভাবে এটি করেছে তা আরও জটিল তবে আপনারে এফেক্টটি কনফিগার করার আরও অনেক সম্ভাবনা রয়েছে (শেষ পর্যন্ত এটি একইরকম কাজ করে ...)।

আরও তথ্যের জন্য, আমি পড়ার পরামর্শ দিচ্ছি: http://en.wikedia.org/wiki/3D_project# পার্সপ্রেসিভ_প্রজেক্ট

Comments

একটি বিষয় যুক্ত করতে হবে, যেহেতু কোণটির পাপ এবং কোসগুলি বেশিরভাগ ফ্রেম প্রতি স্থির থাকে তাই সমস্ত এক্স, ওয়াই অবস্থান নির্ধারণের জন্য লুপের বাইরে এগুলি গণনা করতে ভুলবেন না।

— hobberwickey

Answer 2

এটি তৈরি করার জন্য এখানে কোড দেওয়া আছে। আমি আমার ব্লগে যে টিউটোরিয়াল তৈরি করেছি তার একই কোড । মোড 7 পদ্ধতি এবং রায়কাস্টিং শিখতে সেখানে চেক করুন।

মূলত সিউডো কোডটি হ'ল:

//This is the pseudo-code to generate the basic mode7

for each y in the view do
    y' <- y / z
    for each x in the view do
        x' <- x / z
        put x',y' texture pixel value in x,y view pixel
    end for
    z <- z + 1
end for

আমার টিউটোরিয়ালটি অনুসরণ করে আমি জাভাতে তৈরি কোডটি এখানে দিয়েছি।

package mode7;

import java.awt.image.BufferedImage;
import java.io.File;
import java.io.IOException;
import javax.imageio.ImageIO;
import javax.swing.JFrame;

/**
 * Mode 7 - Basic Implementation
 * This code will map a texture to create a pseudo-3d perspective.
 * This is an infinite render mode. The texture will be repeated without bounds.
 * @author VINICIUS
 */
public class BasicModeSeven {

    //Sizes
    public static final int WIDTH = 800;
    public static final int WIDTH_CENTER = WIDTH/2;
    public static final int HEIGHT = 600;
    public static final int HEIGHT_CENTER = HEIGHT/2;

    /**
     * @param args the command line arguments
     */
    public static void main(String[] args) throws IOException {

        //Create Frame
        JFrame frame = new JFrame("Mode 7");
        frame.setSize(WIDTH, HEIGHT);
        frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
        frame.setLocationRelativeTo(null);
        frame.setVisible(true);

        //Create Buffered Images:
        //image - This is the image that will be printed in the render view
        //texture - This is the image that will be mapped to the render view
        BufferedImage image = new BufferedImage(WIDTH, HEIGHT, BufferedImage.TYPE_INT_RGB);
        BufferedImage texture = ImageIO.read(new File("src/mode7/texture.png"));

        //The new coords that will be used to get the pixel on the texture
        double _x, _y;

        //z - the incrementable variable that beggins at -300 and go to 300, because 
        //the depth will be in the center of the HEIGHT
        double z =  HEIGHT_CENTER * -1;

        //Scales just to control de scale of the printed pixel. It is not necessary
        double scaleX = 16.0;
        double scaleY = 16.0; 

        //Mode 7 - loop (Left Top to Down)
        for(int y = 0; y < HEIGHT; y++){

            _y = y / z; //The new _y coord generated
            if(_y < 0)_y *= -1; //Control the _y because the z starting with a negative number
            _y *= scaleY; //Increase the size using scale
            _y %= texture.getHeight(); //Repeat the pixel avoiding get texture out of bounds 

            for(int x = 0; x < WIDTH; x++){

                _x = (WIDTH_CENTER - x) / z; //The new _x coord generated
                if(_x < 0)_x *= -1; //Control the _x to dont be negative
                _x *= scaleX; //Increase the size using scale
                _x %= texture.getWidth(); //Repeat the pixel avoiding get texture out of bounds 

                //Set x,y of the view image with the _x,_y pixel in the texture
                image.setRGB(x, y, texture.getRGB((int)_x, (int)_y));
            }

            //Increment depth
            z++;
        }

        //Loop to render the generated image
        while(true){
            frame.getGraphics().drawImage(image, 0, 0, null);
        }
    }
}

ফলাফল হলো:

Comments

ব্যাখ্যাটি এখানে প্রগ্রামন্ডোকোইসাস.ব্লগস্পট.কম.আরবি । এই প্রভাবটি তৈরি করতে আপনি ধাপে ধাপে টিউটোরিয়ালটি পেতে পারেন। তবে আমি মন্তব্য পোস্ট করার জন্য আমার পোস্টটি আপডেট করব;)।

— ভিনিসিয়াস বিয়াবতী