"Project Sekai Colorful Stage! feat. Hatsune Miku" (Japanese: プロジェクトセカイ カラフルステージ！ feat. 初音ミク；English: Project Sekai Colorful Stage! feat. Hatsune Miku; Korean: 프로젝트 세카이 컬러풀 스테이지! feat.하츠네 미쿠) is a music rhythm social mobile card game co-planned by SEGA, Craft Egg, and Crypton Future Media, and produced by SEGA Games and Craft Egg's subsidiary Colorful Palette. It is commonly referred to as "プロセカ，" "PRSK," or "PJSK (Beer Barbecue)."
Introduction#
The Beer Barbecue server launched on March 27 this year! Recently, I came across many interesting card designs on Bilibili, so I’ll share a few screenshots for everyone to see~
::: gallery
:::
For more images, you can search for related content on Bilibili. Here, I want to see what kind of personalization PJSK's name cards have done to allow players' individuality to develop so much.
PJSK's Name Card Customization Feature#
Since I haven't played the domestic server, the image text is from the international server.
Basic Personal Information#
In the personal information settings page, there is a distinction between basic personal information (Profile) and custom personal information (Custom Profile).
The basic personal information contains some preset content, and you can just click around to get a nice personal information page for display, suitable for users who do not want to engage in special design. Developers must consider players who do not like UGC creation and provide corresponding convenience.
::: gallery
:::
Custom Personal Information#
In the customization section, the freedom is much greater, as it is essentially a blank slate for players to create freely, allowing up to 150 content blocks.
PJSK has categorized the block content accordingly, as follows:
Personal Information#
This type of block content has preset styles and cannot be resized; it can only be rotated, and only one of the same type can be placed.
Background#
The background is relatively simple, divided into general scenes and story scenes. Story scenes are those that have appeared in the plot, while general scenes are some background content preset by the developers. They can be zoomed in and out and rotated, but only one of the same background can be placed.
Members#
Members can choose from existing card faces (horizontal or vertical) and can control whether to display card star ratings, groups, levels, etc. Only one of the same card can be placed.
Additionally, full-body illustrations can be selected (it should be possible to place them without owning them, but only one of the same character can be placed).
All of this content can be zoomed in and out and rotated.
::: gallery
:::
Titles#
Titles are divided into four categories (Character, Bond, Achievement, Event), and multiple of the same type can be placed (which is a joy for dedicated fans). You can choose between a large title and a small title, and for bond types, you can also select a title name and a corresponding style border for bond levels.
All of this content can be zoomed in and out and rotated.
::: gallery
:::
Text#
The official has already provided a lot of controllable content for text, such as text wrapping (counts as one block), font changes (preset in-game), text size, stroke thickness, line spacing, left-center-right alignment, text color (preset color blocks), and stroke color (preset color blocks).
All of this content can be zoomed in and out and rotated.
In addition to the official features, we can also use some text codes to achieve many special effects (there may be risks of account bans, reviews, etc.).
The basic format for text codes is similar to HTML, requiring angle brackets to wrap around, and closing with a slash at the end <attribute_name></attribute_name>. Multiple effects can be layered within a single segment of text.
Here are some examples of the content used in the images:
<b>Bold
<i>Italic
<size=18> Size
<color=#7d6608>Color
<line-indent=98%> This is an indent, but in PJSK, it can create a dynamic moving effect each time the text is opened; negative values create a shaking effect.
<alpha=#88>Opacity (#AA~#00)
<rotate=45>Rotation Fill in the rotation angle value
<cspace=20>Letter spacing can be negative
<scale=2>Font size can be negative
<mark=#color_code>Highlight, needs to include opacity; otherwise, it will be fully filled.
<sup>Subscript
<sub>Superscript
<sprite=1~15> Yellow bean emoji
Shapes#
Some usable shapes are built-in, and shapes can have fill colors (preset colors), stroke colors (preset colors), shape opacity, stroke opacity, and stroke thickness adjusted.
All of this content can be zoomed in and out and rotated (the zooming here is not a complete proportional zoom; you can control the aspect ratio).
If you need some special shapes, you might consider using the text size tag to enlarge some special characters like ♦♣.
::: gallery
:::
Emojis#
Emojis can also be included in the name card.
All of this content can be zoomed in and out and rotated.
Others#
Lastly, there are some other types of content, such as group names and game names.
All of this content can be zoomed in and out and rotated.
Favorites#
I have no idea what this content is since it has always been empty for me. If anyone knows what it is, please let me know~
Some Operations#
In addition to the operations mentioned above, the official also includes operational aids, as well as layer display/hide, up and down adjustments, and locking features.
Operational aids can snap to corresponding angles or align horizontally or vertically with other blocks, which can help make block content more organized.
How to Promote UGC#
Setting aside incentives for UGC creators, as developers, what we can do is provide better creation tools and lower the usage threshold, allowing more players and creators to join and continuously stimulate their creative desires.
The willingness of users to create is greatly influenced by whether the creation tools provided by developers are simple to use and powerful.
Simplifying the creation process for creators and allowing ideas to be quickly realized is a design goal we must consider when making UGC tools.
PJSK's name card design is just a very simple UGC tool, unlike games like Eggy that require providing events, actions, conditions, and other programming visualizations. But it still offers many block types to enrich the fillable content of the name cards.
If further optimization is to be made, one aspect could be in operations, and another could be to provide component functionality (blocks made up of self-assembled modules), which could also allow for sharing and spreading components to further promote social attributes; I won't elaborate on that here.
Conclusion#
Overall, many types built into the official system can already meet most UGC design content, raising the lower limit of UGC. Some special text codes also raise the upper limit of UGC.
Additionally, it provides many relatively portable operational aids, which is a system-level promotion of UGC.
As designers, we must raise the overall lower limit of UGC to allow for more possibilities in UGC content.
The modules listed above can serve as a reference.
This article is synchronized and updated to xLog by Mix Space.
The original link is https://blog.lolita.best/posts/GameDesign/PJSK-UGC-card-design