Scrolling Background & Collecting Fruit | Create an Amazing Game with Flutter & Flame

Поделиться
HTML-код
  • Опубликовано: 1 дек 2024

Комментарии • 54

  • @whatsonrightnow
    @whatsonrightnow 8 месяцев назад +4

    The SpriteAnimation class has a *removeOnFinish* boolean that you can set in the Fruit collision code to have it automatically remove the component when the animation finishes.

  • @spawnycraft
    @spawnycraft Год назад +10

    Hi, I really like this series. And I think that you have a great approach to teaching.
    About the remove after pickup on the fruit. The class SpriteAnimationComponent has a variable called removeOnFinish. It only removes if animation(loop: false). So if fruit constructor is changed to:
    ```
    Fruit({this.fruit = 'Apple', position, size})
    : super(position: position, size: size, removeOnFinish: true);
    ```
    The fruit will be removed once collected and collection animation is done.
    Keep up the good work :)

    • @Spellthorn
      @Spellthorn  Год назад

      Glad you've been enjoying the series. I appreciate the feedback, I actually noticed that method later on and wondered if it worked like that. Glad to know it does, thanks 😊

  • @markkithinji2666
    @markkithinji2666 Год назад +1

    Love your work spellthorn💖. Ive learnt sooooo much

  • @jhovblack
    @jhovblack Год назад

    Hi again! Just finished this chapter. Happy that my code didn't complain adding these collectibles 🎉(given the approach that I used for player/blocks collisions)
    About the animation thing at the end, I found in the docs the animationTicker property, it can be used to know the state of the animation including if it is finished (non looping) using its attribute completed. It is a future so await/async is required. Thanks for your effort!

    • @jhovblack
      @jhovblack Год назад

      BTW, I liked your approach with the collision code in the fruit side. I would like to do the same for the blocks to make the player code shorter but now I'm scared of touching that code 😂

    • @Spellthorn
      @Spellthorn  Год назад

      Haha. Touch you must. Oh thats good to know I'm tired of counting the time of the animation 🤣 Guess what I get for not reading the documentation 🤫

  • @LearningwithMrStein
    @LearningwithMrStein 9 месяцев назад

    Thanks man ,my bro, you explain a lot ,really helps me a lot to learn flame flutter,Big Respect :D

  • @whatsonrightnow
    @whatsonrightnow 8 месяцев назад +2

    Again, great series. I think you can greatly simplify the scrolling background by using the supplied Parallax component (even if it is only one layer):
    ```
    final background = ParallaxComponent(
    priority: -1,
    parallax: Parallax(
    [
    ParallaxLayer(
    ParallaxImage(
    game.images.fromCache('Background/$backgroundName.png'),
    repeat: ImageRepeat.repeat,
    fill: LayerFill.none,
    ),
    ),
    ],
    baseVelocity: Vector2(0, -50),
    ),
    );
    add(background);
    ```
    And you wouldn't need the background.dart component at all.

    • @Spellthorn
      @Spellthorn  8 месяцев назад

      Yea I figured that out later on. Thanks for the help 🙂

  • @joaoantonio8516
    @joaoantonio8516 10 месяцев назад

    Great video! Regarding the loop on the background, you could make it like this on the update function:
    if (position.y > tileSize * scrollHeight) {
    position.y -= tileSize * scrollHeight;
    }
    Then there would be no need for you to alter the Y value for loop on level!
    I've been learning a lot from you, thank you!

    • @Spellthorn
      @Spellthorn  9 месяцев назад

      Thanks for the tips! I believe I fix this in the future episode with bug fixes 😊

  • @crazyvolt1660
    @crazyvolt1660 Год назад

    Im enjoying the series. So far I learned alot, Thanks man.

  • @szamidevyt
    @szamidevyt 8 месяцев назад +1

    Great videos, thanks!

    • @Spellthorn
      @Spellthorn  8 месяцев назад

      Thank you, glad you enjoyed it 😊

    • @Spellthorn
      @Spellthorn  8 месяцев назад

      I didn't realize at first that you added a super chat as it looked different on mobile. I wanted to reply again to say thank you so much, I really appreciate you doing that. I'm glad the video was helpful 😊

  • @M_Elblasy
    @M_Elblasy 9 месяцев назад

    I'm enjoying the series. So far I learned a lot, Thanks man.
    about looping background the problem in floor() as you said in video if you try using round() instead of floor() it works

  • @zunamo7292
    @zunamo7292 Год назад

    Thank you , You'r great teacher!!

    • @Spellthorn
      @Spellthorn  Год назад

      Thanks 😊 glad you're enjoying the series

  • @confusedpineaple
    @confusedpineaple Год назад

    Awesome tutorial as usual

  • @helkaloic
    @helkaloic Год назад

    27:20 I think you only need to add 1 row in the for loop like y < numTilesY + 1 and it still works, because you've subtracted 1 row in the position (-tileSize). You can check by doing y < numTiles - 1 and it will lose 2 rows. Hope that makes sense.
    Btw, I love this series.

    • @Spellthorn
      @Spellthorn  Год назад

      Thanks for the information, I'll look into it. I'm glad you're enjoying the series 😁 more to come!

    • @ricardomejias7957
      @ricardomejias7957 Год назад

      You're correct, he's missing one row by not setting the loop condition to

    • @Spellthorn
      @Spellthorn  Год назад

      Thanks for this, we use a better way in a future episode though where loops not even needed 😁

  • @공자-k5m
    @공자-k5m Год назад

    Thank you for the video. really helpful for me.

    • @Spellthorn
      @Spellthorn  Год назад

      You are welcome! I'm glad it was helpful 😁

  • @michakowalik4704
    @michakowalik4704 2 месяца назад

    When i collide with fruit it doesn't go in to that 'other is fruit' if statement, but when i print out 'other' in this method, it showed me that this is fruit. What should I do?

  • @niccolobiagi5092
    @niccolobiagi5092 Год назад +1

    54:00 I fixed it just with amount: 7 in the animation, in this way the last frame is empty!! [And no removeFromParent needed]. It's a correct way?

  • @احمدموسى-ي5ز
    @احمدموسى-ي5ز 10 месяцев назад

    what is benefit of using bool _collected variable?
    I write the collisionWithPlayer func without _collected variable and it run.

    • @Spellthorn
      @Spellthorn  10 месяцев назад

      I used it so I could only collect it once. If I remember correctly it would cause me to collect it multiple times otherwise. It's been awhile though so I could be wrong lol

  • @BlueHeadsJena
    @BlueHeadsJena 10 месяцев назад

    My collidedWithPlayer-Methode detects a collision at the start. The Player collides with all fruits one time at the beginning. I dont know why?! Anyone the same problem or a solution?

    • @BlueHeadsJena
      @BlueHeadsJena 10 месяцев назад

      Solution: I have forgotten to remove this methode from the onLoad()-Methode in Fruite ;-)

    • @augustoinafuco5260
      @augustoinafuco5260 9 месяцев назад

      Hi, it's just a try, but did you remove the function from the onLoad() method? If you don't remove it from there every time the level is rendered it will call the function and change the state of the fruit (consequently it will disappear)

  • @markkithinji2666
    @markkithinji2666 Год назад

    Just curious, do y'all go through all this when creating the many developers make the same video vids😅

    • @Spellthorn
      @Spellthorn  10 месяцев назад

      So I make what I'm trying to make, figure it out then figure out how to improve it. Then figure out how to explain it then record the video. Lol

  • @muhammadissasabbagh1540
    @muhammadissasabbagh1540 Год назад

    🎉🎉🎉🎉🎉🎉

  • @denilsonwashuma1987
    @denilsonwashuma1987 Год назад

    😇😇😇

  • @denizgirginer
    @denizgirginer Год назад

    im at this section and runs soo slow

    • @Spellthorn
      @Spellthorn  Год назад

      Probably because of how I did the scrolling. I improved it later in the series so maybe skip that for now

  • @ricardomejias7957
    @ricardomejias7957 Год назад

    27:22 I think the reason why it works can be explained by the following algebraic demonstration.
    For the sake of this proof I´m assuming game.size.y % tileSize = 0 (meaning the height of our game can be perfectly divided by the tile size).
    numTilesY = game.size.y / tileSize;
    loopCondition = game.size.y / numTilesY; // This is the loop condition you have on line 41
    // Replacing "numTilesY" in "loopCondition" with its value "game.size.y / tileSize":
    loopCondition = game.size.y / numTilesY;
    loopCondition = game.size.y / (game.size.y / tileSize); // Dividing by a fraction is equivalent to multilying by its reciprocal
    loopCondition = game.size.y * (tileSize / game.size.y); // We move the parenthesis
    loopCondition = (game.size.y * tileSize) / game.size.y; // We can cancel "game.size.y"
    loopCondition = tileSize;
    So, the amount of rows you are rendering equals the tile size, and this amount is way larger than the actual amount of rows required for filling the screen (unless you had a screen that required over 64 rows). Then, on first render, the "update" function in the "BackgroundTile" class translates all the extra rows back to "position.y = -tileSize;".
    In a nutshell, this works cause you are rendering way more rows than needed, and all extra rows are getting stacked into one single row on first render.
    Loving the series, keep on the good work.

    • @ricardomejias7957
      @ricardomejias7957 Год назад

      We can easily check this by counting how many times you enter on the outter loop in line 41, you'll see it equals tileSize - 1 (cause the final iteration breaks the loop)

    • @Spellthorn
      @Spellthorn  Год назад

      Makes sense, we fix all this in episode 8 though as there is a better built in way, oops