Animation created by

Dẫn nhập

Megaman X4 là một tựa game rất thú vị gắn bó với mình một thời gian dài qua điện tử bấm, khi mà máy tính hay lập trình còn là gì đó vô cùng xa vời. Mình còn nhớ nguyên mấy tháng mùa hè dí đầu dí cổ vào game để luyện tay qua màn, mãi mà không phá đảo được. Giờ để thử thách bản thân, mình đã tạo ra một giải pháp giúp mình chinh phục "giấc mơ tuổi thơ này". Đó chính là TOOL CHEAT GAME MEGAMAN X4. :v :v :v

Tuy nhiên, trước khi làm tool bạn cần có một giao diện đẹp "kinh khủng khiếp" để có thể xịn xò ngang với game. Chính vì vậy, để bổ trợ cho khóa học CHEAT GAME MEGAMAN X4, đồng thời củng cố khả năng lập trình giao diện với WPF. Kteam sẽ cùng bạn bắt đầu Lập trình giao diện Megaman tool với WPF.

Ở bài trước mình đã hướng dẫn các bạn THAY ĐỔI TRẠNG THÁI INJECT. Ở bài này, Kteam sẽ cùng bạn tạo hiệu ứng cho "Created by".

---

Nội dung

Để theo dõi bài này một cách tốt nhất, bạn nên có kiến thức về:

• LẬP TRÌNH WPF 
• Đã xem qua bài IMPORT ASSEST TỪ DESIGN
• Đã xem qua bài TẠO THANH CONTROLBAR VÀ HÌNH LOGO
• Đã xem qua bài THAY ĐỔI TRẠNG THÁI INJECT

Trong bài này , chúng ta sẽ cùng tìm hiểu các vấn đề:

• Cách tạo chữ "Created by ..." sử dụng storyboard và trigger.
• Một số lưu ý và kinh nghiệm

---

Source code tham khảo

App.xaml

<Application x:Class="MegamanUI.App"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:local="clr-namespace:MegamanUI"
             StartupUri="MainWindow.xaml">
    <Application.Resources>        
        <ResourceDictionary>
            <ResourceDictionary.MergedDictionaries>
                <ResourceDictionary Source="XamlResources/TriggerRes.xaml"></ResourceDictionary>
                <ResourceDictionary Source="XamlResources/BaseRes.xaml"></ResourceDictionary>
            </ResourceDictionary.MergedDictionaries>
        </ResourceDictionary>
    </Application.Resources>
</Application>

App.xaml.cs

using System;
using System.Collections.Generic;
using System.Configuration;
using System.Data;
using System.Linq;
using System.Threading.Tasks;
using System.Windows;

namespace MegamanUI
{
    /// <summary>
    /// Interaction logic for App.xaml
    /// </summary>
    public partial class App : Application
    {
    }
}

MainWindow.xaml

<Window x:Class="MegamanUI.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:MegamanUI"
        mc:Ignorable="d"
        WindowStyle="None"
        ResizeMode="CanMinimize"
        WindowStartupLocation="CenterScreen"
        Height="350" Width="550">
    <Window.Background>
        <ImageBrush ImageSource="Images/bg-kteam.png"></ImageBrush>
    </Window.Background>
    <Grid>
        <!--Control bar-->
        <DockPanel PreviewMouseLeftButtonDown="DockPanel_PreviewMouseLeftButtonDown"
                   HorizontalAlignment="Stretch" LastChildFill="False" VerticalAlignment="Top" Background="Transparent" Height="25">
            <Image DockPanel.Dock="Right" Source="Images/x.png"
                   Cursor="Hand"                  
                   PreviewMouseDown="Image_PreviewMouseDown_1"
                   Margin="0 0 15 0">
                <Image.Style>
                    <Style TargetType="Image">
                        <Setter Property="Width" Value="12"></Setter>
                        <Style.Triggers>
                            <Trigger Property="Image.IsMouseOver" Value="True">
                                <Setter Property="Width" Value="15"></Setter>
                            </Trigger>
                        </Style.Triggers>
                    </Style>
                </Image.Style>
            </Image>
            <Image DockPanel.Dock="Right" Source="Images/-.png" 
                   PreviewMouseDown="Image_PreviewMouseDown"
                   Margin="0 0 10 0" Cursor="Hand">
                <Image.Style>
                    <Style TargetType="Image">
                        <Setter Property="Width" Value="12"></Setter>
                        <Style.Triggers>
                            <Trigger Property="Image.IsMouseOver" Value="True">
                                <Setter Property="Width" Value="15"></Setter>
                            </Trigger>
                        </Style.Triggers>
                    </Style>
                </Image.Style>
            </Image>
        </DockPanel>
        
        <Image Source="Images/megaman-logo-kteam.png"
               Height="30"
               Margin="28 3 0 0"
               Cursor="Hand"
               HorizontalAlignment="Left" VerticalAlignment="Top"></Image>

        <Image Source="Images/kteam-logo.png"
               Height="30"
               Margin="0 0 40 10"
               Cursor="Hand"
               HorizontalAlignment="Right" VerticalAlignment="Bottom"></Image>

        <!--Injected-->
        <Image Height="220"
               Margin="0 0 40 10"
               Cursor="Hand"
               MouseDown="Image_MouseDown"
                MouseEnter="Image_MouseEnter"
               HorizontalAlignment="Center" VerticalAlignment="Center">
            <Image.Style>
                <Style TargetType="Image">
                    <Setter Property="Source" Value="Images/Megaman-Kteam.png"></Setter>
                    <Style.Triggers>
                        <MultiDataTrigger>
                            <MultiDataTrigger.Conditions>
                                <Condition Binding="{Binding IsInjected}" Value="True"></Condition>
                            </MultiDataTrigger.Conditions>
                            <Setter Property="Source" Value="Images/Megaman-Gaea-Armor-Kteam.png"></Setter>
                        </MultiDataTrigger>
                        <MultiDataTrigger>
                            <MultiDataTrigger.Conditions>
                                <Condition Binding="{Binding IsInjected}" Value="False"></Condition>
                                <Condition Binding="{Binding RelativeSource={RelativeSource Mode=Self}, Path=IsMouseOver}" Value="True"></Condition>
                            </MultiDataTrigger.Conditions>
                            <Setter Property="Source" Value="Images/Megaman-Gaea-Armor-Kteam.png"></Setter>
                        </MultiDataTrigger>
                    </Style.Triggers>
                </Style>
            </Image.Style>
        </Image>
        
        <!--Created by K9-->
        <TextBlock FontFamily="{StaticResource mainFont}"
                   Foreground="#00FFFF"
                   VerticalAlignment="Bottom"
                   HorizontalAlignment="Center"
                   Margin="0 0 170 5"
                   FontSize="20">
            <TextBlock.Style>
                <Style TargetType="TextBlock">
                    <Setter Property="Text" Value="Created by K9"></Setter>
                    <Style.Triggers>
                        <EventTrigger RoutedEvent="Window.Loaded">
                            <BeginStoryboard Storyboard="{StaticResource createStoryStart}"></BeginStoryboard>
                        </EventTrigger>
                    </Style.Triggers>
                </Style>
            </TextBlock.Style>
        </TextBlock>
    </Grid>
</Window>

MainWindow.xaml.cs

using System;
using System.Collections.Generic;
using System.ComponentModel;
using System.Linq;
using System.Media;
using System.Runtime.CompilerServices;
using System.Text;
using System.Threading.Tasks;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Navigation;
using System.Windows.Shapes;

namespace MegamanUI
{
    /// <summary>
    /// Interaction logic for MainWindow.xaml
    /// </summary>
    public partial class MainWindow : Window,INotifyPropertyChanged
    {
        public event PropertyChangedEventHandler PropertyChanged;

        protected virtual void OnPropertyChanged([CallerMemberName] string propertyName = null)
        {
            PropertyChangedEventHandler handler = PropertyChanged;
            if (handler != null)
                handler(this, new PropertyChangedEventArgs(propertyName));
        }

        #region properties
        private bool _IsInjected;
        public bool IsInjected
        {
            get => _IsInjected;
            set
            {
                _IsInjected = value;
                OnPropertyChanged();
            }
        }

        SoundPlayer sp_active;
        SoundPlayer sp_hover;
        #endregion

        public MainWindow()
        {
            InitializeComponent();
            this.DataContext = this;

            FirstLoad();
        }

        #region methods
        void FirstLoad()
        {
            IsInjected = false;

            LoadSound();
        }

        void LoadSound()
        {
            sp_active = new SoundPlayer(Properties.Resources.hover_2);
            sp_hover = new SoundPlayer(Properties.Resources.hover);
        }

        void PlaySoundActive()
        {
            sp_active.Play();
        }

        void PlaySoundHover()
        {
            sp_hover.Play();
        }
        #endregion


        #region events
        private void DockPanel_PreviewMouseLeftButtonDown(object sender, MouseButtonEventArgs e)
        {
            base.OnMouseLeftButtonDown(e);
            this.DragMove();
        }

        private void Image_PreviewMouseDown(object sender, MouseButtonEventArgs e)
        {
            WindowState = WindowState.Minimized;
        }

        private void Image_PreviewMouseDown_1(object sender, MouseButtonEventArgs e)
        {
            this.Close();
        }

        private void Image_MouseDown(object sender, MouseButtonEventArgs e)
        {
            IsInjected = !IsInjected;
            PlaySoundActive();
        }

        private void Image_MouseEnter(object sender, MouseEventArgs e)
        {
            if(!IsInjected)
                PlaySoundHover();
        }
        #endregion


    }
}

XamlResources/BaseRes.xaml

<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
                    xmlns:local="clr-namespace:MegamanUI.XamlResources">
    <FontFamily x:Key="mainFont">/Megaman UI;component/font/HP-Yard Regular.ttf#HP-Yard</FontFamily>
</ResourceDictionary>

XamlResources/TriggerRes.xaml

<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
                    xmlns:local="clr-namespace:MegamanUI.XamlResources">

    <KeyTime x:Key="frame1">0:0:0.1</KeyTime>
    <KeyTime x:Key="frame2">0:0:0.2</KeyTime>
    <KeyTime x:Key="frame3">0:0:0.3</KeyTime>
    <KeyTime x:Key="frame4">0:0:0.4</KeyTime>
    <KeyTime x:Key="frame5">0:0:0.5</KeyTime>
    <KeyTime x:Key="frame6">0:0:0.6</KeyTime>
    <KeyTime x:Key="frame7">0:0:0.7</KeyTime>
    <KeyTime x:Key="frame8">0:0:0.8</KeyTime>
    <KeyTime x:Key="frame9">0:0:0.9</KeyTime>
    <KeyTime x:Key="frame10">0:0:1</KeyTime>
    <KeyTime x:Key="frame11">0:0:1.1</KeyTime>
    <KeyTime x:Key="frame12">0:0:1.2</KeyTime>
    <KeyTime x:Key="frame13">0:0:1.3</KeyTime>
    <KeyTime x:Key="frame14">0:0:1.4</KeyTime>
    <KeyTime x:Key="frame15">0:0:1.5</KeyTime>
    <KeyTime x:Key="frame16">0:0:1.6</KeyTime>
    <KeyTime x:Key="frame2s">0:0:2</KeyTime>
    
    <Storyboard x:Key="createStoryStart" Storyboard.TargetProperty="(TextBlock.Text)">
        <StringAnimationUsingKeyFrames RepeatBehavior="Forever">
            <DiscreteStringKeyFrame Value="C" KeyTime="{StaticResource frame1}"></DiscreteStringKeyFrame>
            <DiscreteStringKeyFrame Value="Cr" KeyTime="{StaticResource frame2}"></DiscreteStringKeyFrame>
            <DiscreteStringKeyFrame Value="Cre" KeyTime="{StaticResource frame3}"></DiscreteStringKeyFrame>
            <DiscreteStringKeyFrame Value="Crea" KeyTime="{StaticResource frame4}"></DiscreteStringKeyFrame>
            <DiscreteStringKeyFrame Value="Creat" KeyTime="{StaticResource frame5}"></DiscreteStringKeyFrame>
            <DiscreteStringKeyFrame Value="Create" KeyTime="{StaticResource frame6}"></DiscreteStringKeyFrame>
            <DiscreteStringKeyFrame Value="Created" KeyTime="{StaticResource frame7}"></DiscreteStringKeyFrame>
            <DiscreteStringKeyFrame Value="Created " KeyTime="{StaticResource frame8}"></DiscreteStringKeyFrame>
            <DiscreteStringKeyFrame Value="Created b" KeyTime="{StaticResource frame9}"></DiscreteStringKeyFrame>
            <DiscreteStringKeyFrame Value="Created by" KeyTime="{StaticResource frame10}"></DiscreteStringKeyFrame>
            <DiscreteStringKeyFrame Value="Created by " KeyTime="{StaticResource frame11}"></DiscreteStringKeyFrame>
            <DiscreteStringKeyFrame Value="Created by K" KeyTime="{StaticResource frame12}"></DiscreteStringKeyFrame>
            <DiscreteStringKeyFrame Value="Created by K9" KeyTime="{StaticResource frame13}"></DiscreteStringKeyFrame>
            <DiscreteStringKeyFrame Value="Created by K9" KeyTime="{StaticResource frame2s}"></DiscreteStringKeyFrame>
        </StringAnimationUsingKeyFrames>
    </Storyboard>
</ResourceDictionary>

---

Assest file

Nhằm giúp bạn có thể trải nghiệm hiệu ứng tool một cách tốt nhất, và chủ động trong việc sử dụng source. Kteam hỗ trợ full source code và các file liên quan tại phần ASSEST bên dưới nhé

Trong file này có gì???

• Đầu tiên bạn sẽ có 1 file chứa assest gồm âm thanh, font, hình ảnh và icon. 
• Tiếp theo là File build hoàn chỉnh để bạn dễ dàng tham khảo các hiệu ứng.
• Project hoàn chỉnh để tham khảo
• Một file game exe dành cho bạn nào chưa từng chơi game megaman có thể thử qua để thêm hứng thú.

---

Kết luận

Qua bài học này, bạn đã nắm được cách sử dụng storyboard; biết cách cho chữ lặp lại; biết cách sử dụng StringAnimationUsingKeyFrames; sử dụng DiscreteStingKerFrame; hiểu KeyFrame là gì, value của nó là gì.

Trong bài sau, mình sẽ hướng dẫn các bạn TẠO BUTTON ONE HIT CREEP.

Cảm ơn các bạn đã theo dõi bài viết. Hãy để lại bình luận hoặc góp ý của mình để phát triển bài viết tốt hơn. Đừng quên “Luyện tập – Thử thách – Không ngại khó”.

---

Thảo luận

Nếu bạn có bất kỳ khó khăn hay thắc mắc gì về khóa học, đừng ngần ngại đặt câu hỏi trong phần BÌNH LUẬN bên dưới hoặc trong mục HỎI & ĐÁP trên thư viện Howkteam.com để nhận được sự hỗ trợ từ cộng đồng.