Spell System - UQdeco2800/2022-studio-3 GitHub Wiki

Overview

Spell is often used in video games to end a duel or battle, and contains a lot of design elements and functionality.

It can be a powerful attack, a supermodel secondary effect, or even an invincible buff.

Generally speaking, its triggering requires a long time accumulation of resources and judgment of the game situation, which can change the offensive in one fell swoop.

In Atlantis Sinking, the conditions of victory are simplified. At the current design stage, defeating all existing enemies will lead to victory. In order to simplify the implementation of this condition and improve the gameplay, we designed a simple but functional system at this stage to enrich the player's combat experience (rather than just building and controlling units).

Spell, modeled as a divine punishment from the Greek gods, represents a dimensionality-reducing blow. So the effect of spell will be...seemingly unbalanced. In the current development stage, we have only designed one "Zeus' Thunder", which can make enemy units within a certain circular area disappear directly.

Spell system is expected a unique GUI on the top-left of the screen, and consists of three parts: spell power bar, release button and spell effect.

• Spell Power Bar: a progress bar design. Time flow may increase the scale of the progress bar, releasing spell will clear all progress.

• Spell Release Button: There should be a button on the GUI to control the spell. Otherwise, a hotkey should be set.

• Spell Effects: animation effects designed based on the game theme. The effect of the spell will be an area attack that will destroy all enemies within a certain area.

For our Sprint 3's user testing, click here.

Feature

GUI

Here's the first stage of the interface of spell system.

Similar to our previous infobox design process, this time spell's UI box uses spell's special effects theme as the background, similar to a thunderbolt covered with dark clouds in the sky.

The only dynamic factor for this system is the powerbar buildup. So we fixed its text directly and left blank to place the progress bar. In particular, the designers hollowed out the lower right corner for the "release" button to highlight its presence.

This is how we made the spell's animation and UI.

public class Explosion {
    AnimationRenderComponent animator ;
    private static final String RELEASE = "spell_effect";
    Entity entity;

    public Explosion() {
        entity = new Entity();
        animator = new AnimationRenderComponent(ServiceLocator.getResourceService().getAsset("images/spell.atlas", TextureAtlas.class));
        animator.addAnimation(RELEASE,0.1f, Animation.PlayMode.NORMAL);
        entity.setScale(20f,12f);
        entity.addComponent(animator);
        entity.setEntityName("Explosion");
    }

    public void create() {
    }

    public void dispose() {
        entity.dispose();
    }

    public Entity getEntity() { return this.entity; }

}

With more communication and discussion across groups, both the type of spell and the effect are likely to be updated and iterated, but currently (sprint 3) only "Zeus’ Thunder" is used as a special effect throughout the game.

In addition, since the attack logic and victory conditions in the game have not been perfected, spell is likely to be the only mechanic that can deal effective damage to the enemy. In this context, we will temporarily lift the release limit of spell, which can be released "temporarily" without interval.

Interaction

The casting range of the spell should be manually selected. After the player presses the spell key, it will enter the pre-selected range state.

At this point, spell will expand a circular attack range centered on the point where the mouse is, and release it by pressing the mouse (or pressing the hotkey again).

After releasing the spell, the following effects will occur:

• Start playing spell effects in the specified range, which is designed here like:

• Destroy enemies within the specified range without considering their health and defense.

We get this function done by:

private void onRelease() {
        logger.info("Releasing Spell");
        spellBtn.setVisible(false);
        this.timer = new Timer(15000, 15001);
        for (Entity entity : ServiceLocator.getEntityService().getEntities()) {
            if (entity.getEntityName() == "Explosion") {
                spell = entity;
                break;
            }
        }
        spell.setEnabled(true);
        spell.getComponent(AnimationRenderComponent.class).startAnimation("spell_effect");

        String[] enemy = {"blueJoker","snake","titan","wolf"};
        List enemyList = Arrays.asList(enemy);

        for (Entity entity : ServiceLocator.getEntityService().getEntities()) {
            String name = entity.getEntityName();
            if (name != null && enemyList.contains(name)) {
                entity.dispose();
            }
        }
    }

• After the spell released, the release button will become unclickable with another design, until the cooldown time over.

Elements Summary

Our Spell system will contains the following elements.

1. A Spell Box fixed in the upper left corner of the screen, covering the following:

• Spell's character or icon.
• Powerbar required for Spell system(maybe not needed in sprint 3).
• "Release" button to prepare to release spell.

2. Spell's animation effects. It will be generated by a combination of spell.png and spell.atlas.

3. The logic inside Spell, including:

• Pre-select spell's attack range. When the user presses the release button, a circular pre-selection range with the mouse as the center will be generated as the position where the spell will come. Note that any other operations at this stage may cause the spell to be freed in the wrong place! When the player clicks anywhere on the map, the pre-selection state ends and the spell is released.

• Spell function itself. When the player confirms to release the spell, an animation composed of spell.png & atlas created by designer Kawhi will be played. After the animation is played (or at the same time as it is playing), all enemies within range will be destroyed immediately. This attack ignores any of their health and defense.

• The function of destroying the enemy. If other groups have not yet developed this feature, a feature to eliminate enemies is just needed. Since we will kill an enemy under any conditions, this feature simply wipes it from the screen. (I will check if other teams has this function.)

The UML diagram of spell system:

Design Iteration

We designed a rectangular void to house the release button, and the initial design of the button was a circular element:

The original intention of designing it like this is to highlight the expressive power of "internal elements breaking the limit", and try to interpret a violent aesthetic.

Obviously I failed.

Not only did it fail to meet the demand in the inlay of the notch, but its appearance and performance also failed to meet expectations. After asking other members of the group, we did a design iteration on the inline button.

This time I tried the rectangular buttons directly to fit the spell GUI, and used light blue for lightning and dark blue for the sky (just like the spell box design). After getting feedback from the test, we also designed an additional button in the disabled state.

In the current game design trend, gray is generally the representative impression color of "disabled" and "cooling".

At the same time, in order to highlight the "Spell is cooling" effect, I filled the bottom part with the same color as the original button to simulate its "progress".

This disabled button ends up looking like:

Casting Method:

The spell will be aimed via a crosshairlike spell indicator as shown below. Once clicked the spell will cast on the designated area which is being hovered over by the indicator/crosshair itself.

Isometric View: