How can I make this verticale dayweek filter?

How can I make this verticale dayweek filter?

What exactly do you want to accomplish?

If what you want to do is to create an overlay of static text design, I think it would be easier to jusy design the layout of the text in photoshop, illustrator or similar program, export it as png transparent background and use it as a texture for plane/rectangle’s material. Why? Cuz i think they still don’t allow static text using 2dtext for filter that is not interactive (static) and also because it’s easier in those program to align and testing out different layout.

Photoshop would be easier for sure. It would work fine if there were only 7 days to name, but once you factor in other languages, it becomes impossible to do with images.

There’s a chance you’ll have a static text battle, in any case. The rules and reviewers aren’t always in sync about this stuff. You should be able to use the dynamic text, even if it does take a few rounds of rejections.

Anyway, Noland mentioned using the 2d stack thing, but I’ve never played with it. That could be part of the solution. If that doesn’t work, you could manually lay out some text fields where you want them. Getting the text fields arranged for individual letters is the first step. You’ll need to decide how many letters you want to support… I’m sure there are some long day names in some languages.

The next part would be assigning the letters. I’m actually a little uncertain of how to do this in script since the date localization is broken there (it only works in the editor’s dynamic text). Maybe there’s a way to read the text value from a dummy text object that has the dynamic text in it, split it into single characters, then assign those characters to the single character text fields.

I’ll see if I can figure it out…

So, the dynamic text capability is only available in the editor (not scripting). If I try getting the text value in script, it just spits out the template string (${DATE[dayofweek]:titlecase}), and not the actual day name.

In JS, there’s a neat localization API for dates, but unfortunately it’s not implemented in the Hermes JS runtime, which is what spark uses. Hopefully they will fix this soon, since I know it’s actually been done on the github repository, but I guess Spark is using an old version of it.

Anyway, the workaround is to supply your own json of day names, based on language code. It’s not ideal, but at least it should be simple enough to find translations.

Here’s a demo project: dayname-layout.arexport (184.1 KB)

And some script for quick reference

const Scene = require('Scene')
const {log, watch} = require('Diagnostics')
const {language} = require('Locale')

watch('language', language)

const dayNamesByLanguage = {
  en: [
    'Sunday',
    'Monday',
    'Tuesday',
    'Wednesday',
    'Thursday',
    'Friday',
    'Saturday',
  ],
  // add more languages here
}

Promise.all([
  Scene.root.findFirst('2dText0'),
  Scene.root.findFirst('2dText1'),
  Scene.root.findFirst('2dText2'),
  Scene.root.findFirst('2dText3'),
  Scene.root.findFirst('2dText4'),
  Scene.root.findFirst('2dText5'),
  // ...add more text objects
]).then(texts => {
  log(`got ${texts.length} text objects`)
  // get day names by language, default to english
  const dayNames = dayNamesByLanguage[language] || dayNamesByLanguage.en
  const dayName = dayNames[new Date().getDay()]
  texts.forEach((text, i) => {
    text.text = dayName[i]
  })
}).catch(error => log(error.message))
2 Likes

Thank you very much for your help Josh. I will get started right away and do my very best to make it work! Have a Happy Christmas and new year to you!

1 Like