ინტერაქტიული სცენები

ახლა, როცა ვიცით, როგორ შევქმნათ ლამაზი ანიმაციური სცენები, დავრწმუნდეთ, რომ შეგვიძლია სხვა არასტატიკურ სცენებთან გამკლავება: სცენები, რომლებიც რეაგირებენ მომხმარებლის ინტერაქციაზე. მაგალითად, ჩვენ გვსურს, დავხატოთ სცენა, სადაც ვინსტონს ჰყავს ბავშვები (მისი როკვარსკვლავობის ფაზის შემდეგ, რა თქმა უნდა) -- მაგრამ ჩვენ აგრეთვე გვინდა, მომხმარებელმა დააწკაპუნოს, რათა ვინსტონს მეტი ბავშვი მისცეს. მეტი პატარა ვინსტონუკა არ გვაწყენს, ასე არაა?

აი, როგორი იქნებოდა ეს სცენა, ცალკეული პროგრამა რომ ყოფილიყო. პროგრამა ხატავს სცენის სტატიკურ ნაწილს და შემდეგ mouseClicked-ში ის ხატავს ვინსტონის ბავშვებს მაუსის დაწკაპუნების ადგილზე — ზემოდან ახატავს იმაზე, რაც უკვე ეხატა.

როგორ მოვათავსებდით ამას ჩვენს მრავალსცენიან პროგრამაში? დავიწყებდით სტატიკური ხატვის კოდის სცენის ხატვის ფუნქციაში (drawScene5()-ში) მოთავსებით და mouseClicked-ს დავამატებდით სცენის გადართვის ლოგიკას:

var drawScene5 = function() {
    currentScene = 5;
    background(173, 239, 255);
    fill(7, 14, 145);
    textSize(39);
    text("ვინსტონს ბავშვები ჰყავს!", 10, 47);
    ...
};

mouseClicked = function() {
    if (currentScene === 1) {
        drawScene2();
    } else if (currentScene === 2) {
        drawScene3();
    } else if (currentScene === 3) {
        drawScene4();
    }  else if (currentScene === 4) {
        drawScene5();
    } else if (currentScene === 5) {
        drawScene1();
    }
};

აი, როგორ გამოიყურება ის:

მაგრამ როგორ გამოვიყენოთ mouseClicked ფუნქციონალი? ჩვენ უკვე განვსაზღვრეთ mouseClicked ჩვენს კოდში და მას ორჯერ ვერ განვსაზღვრავთ. JavaScript-ში ფუნქციის ბოლო განსაზღვრა „იმარჯვებს", ის გადაეწერება ყველა წინა განსაზღვრას. ეს ნიშნავს, რომ უნდა ვიპოვოთ კარგი ადგილი ამ ბავშვის დამხატავი ხაზის ჩასასმელად ჩვენს არსებულ mouseClicked-ში. განვიხილოთ რამდენიმე ვარიანტი:

1. შეგვიძლია, ფუნქციის დასაწყისში ხაზი ჩავსვათ:

mouseClicked = function() {
    image(getImage("creatures/BabyWinston"), mouseX-20, mouseY-20);
    ...
};

შემდეგ ის გამოიძახება მომხმარებლის მიერ მაუსის ყოველ დაწკაპუნებაზე, იმ შემთხვევაშიც, თუ ბავშვის შექმნის სცენა არ იქნება (უცნაური იქნებოდა, ბავშვ ვინსტონს რომ ბავშვი ჰყოლოდა). ეს კარგი არაა.

2. შეგვეძლო, ხაზი ჩაგვესვა currentScene === 4-ის if ბლოკში:

mouseClicked = function() {
    if (currentScene === 1) {
        drawScene2();
    } else if (currentScene === 2) {
        drawScene3();
    } else if (currentScene === 3) {
        drawScene4();
    }  else if (currentScene === 4) {
        drawScene5();
        image(getImage("creatures/BabyWinston"), mouseX-20, mouseY-20);
    } else if (currentScene === 5) {
        drawScene1();
    }
};

ჩვენ სწორედ აქ ვიძახებთ drawScene5()-ს და ბავშვები უნდა დაემატონ მე-5 სცენას. მაგრამ დაფიქრდით: ეს ნიშნავს, რომ სცენის ყოველი დახატვისას დავხატავდით დამატებით ბავშვს. ეს ასევე ნიშნავს, რომ ჩვენ აღარ დავხატავდით ბავშვებს, რადგან currentScene დაყენდებოდა 5-ზე და იმ if ბლოკში არსებული კოდი აღარ გაეშვებოდა.

3. შეგვეძლო, ხაზი ჩაგვესვა currentScene === 5-ის if ბლოკში:

mouseClicked = function() {
    if (currentScene === 1) {
        drawScene2();
    } else if (currentScene === 2) {
        drawScene3();
    } else if (currentScene === 3) {
        drawScene4();
    }  else if (currentScene === 4) {
        drawScene5();
    } else if (currentScene === 5) {
        image(getImage("creatures/BabyWinston"), mouseX-20, mouseY-20);
        drawScene1();
    }
};

ეს ნიშნავს, რომ არ დავხატავდით ბავშვებს სცენის საწყისი დახატვის შემდეგ პირველ დაწკაპუნებამდე. მაგრამ, როგორც მის შემდეგ არსებული ხაზიდან ხედავთ, ბავშვი მაშინვე ჩანაცვლდებოდა სცენა 1-ით.

აქ ვიაზრებთ ფატალურ შეცდომას ბავშვის-დაწკაპუნების სცენის ჩვენს სცენებში ინტეგრაციის იდეაში: ჩვენ ვიყენებთ ზუსტად იმავე ინტერაქციას — მაუსის დაწკაპუნებას ეკრანის ნებისმიერ წერტილზე — სცენების შესაცვლელადაც და სცენის შიგნით არსებული ინტერაქციისთვისაც. ახლა ნამდვილად თავსატეხის წინაშე ვართ და უნდა განვიხილოთ უფრო რადიკალური ვარიანტები სცენის ინტეგრაციისთვის.

4. შეგვიძლია, შევწყვიტოთ სცენა 1-ის ხატვა ბოლოს და მომხმარებელს ვუთხრათ, რომ გადატვირთოს ამ შემთხვევაში. რა თქმა უნდა, ეს იმუშავებდა, მაგრამ ეს ეყრდნობა ფაქტს, რომ ჩვენი დაწკაპუნებით კონტროლირებული ეკრანი ბოლოშია. რა მოხდებოდა იმ შემთხვევაში, როცა უფრო ადრეული დაწკაპუნებით კონტროლირებული სცენა მოგვინდებოდა? ეს ამოხსნა არ იმუშავებდა.

5. შეგვეძლო, გამოგვეყენებინა სხვანაირი ინტერაქცია - როგორიცაა mouseDragged. ეს იმუშავებს, რადგან გადაზიდვა დაწკაპუნების მოვლენასაც არ იწვევს. მაინც გვიწევს შემდეგი შემოწმების გაკეთება: currentScene === 5, რათა დავრწმუნდეთ, რომ გადაზიდვა არ ხატავს ბავშვებს სხვა სცენაში:

mouseDragged = function() {
    if (currentScene === 5) {
        image(getImage("creatures/BabyWinston"), mouseX-20, mouseY-20);
    }
};

სცადეთ ის ქვემოთ, საბოლოო სცენა აუცილებლად გადაქაჩეთ:

ეს, თითქოს, მუშაობს, მაგრამ ცოტათი ვნერვიულობ ვინსტონის ბავშვების საბოლოო რაოდენობაზე. ზოგადად, ეს ოპტიმალური ამოხსნა არაა, რადგან ეს ნიშნავს, რომ თავი უნდა შევიზღუდოთ ისეთი სცენების შექმნით, რომლებიც მაუსის დაწკაპუნებებზე არ რეაგირებენ. ჩვენ არ გვინდა ამ შეზღუდვის ქონა, უნდა არსებობდეს უკეთესი გზა.

მაუსის დაწკაპუნებები ადგილმდებარეობის მიხედვით ხომ არ განგვესხვავებინა? ამ შემთხვევაში, ერთ მდებარეობაზე დაწკაპუნება ნიშნავს სცენების შეცვლას, ხოლო სხვაგან დაწკაპუნება შეგვიძლია შიდა სასცენო ინტერაქციისთვის გამოვიყენოთ. აი, როგორც ღილაკი! მრავალსცენიანი პროგრამების უმრავლესობა ასე უდგება ამ ამოცანას, ამის შესახებ მოგვიანებით ვისაუბრებთ.

გსურთ, შეუერთდეთ დისკუსიას?

შესვლა

დავალაგოთ:

პოსტები ჯერ არ არის.

გესმით ინგლისური? დააწკაპუნეთ აქ და გაეცანით განხილვას ხანის აკადემიის ინგლისურენოვან გვერდზე.